/*
Theme Name: Penny Ideas
Description: Block theme for Paul London's author site.
Version: 0.3.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: pennyideas
*/

/* Short names for the colours and fonts set in theme.json */
:root {
	--baize: var(--wp--preset--color--baize);
	--baize-dark: var(--wp--preset--color--baize-deep);
	--paper: var(--wp--preset--color--paper);
	--ink: var(--wp--preset--color--ink);
	--ink-soft: var(--wp--preset--color--ink-soft);
	--red: var(--wp--preset--color--stamp);
	--gold: var(--wp--preset--color--gold);
	--caps: var(--wp--preset--font-family--caps);
	--body: var(--wp--preset--font-family--body);
	--gutter: 16px;
}

/* Page */
body {
	background-image: url("assets/images/baize-felt.png");
	background-size: 512px 512px;
}
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
img { height: auto; }
input, textarea { caret-color: var(--red); }

main {
	box-sizing: border-box;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 var(--gutter) 60px;
}

/* Header */
.site-bar {
	box-sizing: border-box;
	max-width: 1120px;
	margin: 0 auto;
	padding: 20px var(--gutter);
	gap: 12px;
}
.site-bar .wp-block-site-title {
	margin: 0;
	font: 600 1.1rem/1 var(--caps);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.site-bar .wp-block-site-title a { text-decoration: none; }
.site-bar .wp-block-navigation { gap: 24px; font-size: 0.95rem; font-weight: 700; }
.site-bar .wp-block-navigation a {
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	text-decoration: none;
	white-space: nowrap;
}
.site-bar .wp-block-navigation a:hover { border-color: var(--gold); color: inherit; }

/* Notices: white sheets pinned to the board */
.is-style-notice {
	position: relative;
	padding: 40px;
	background: var(--paper);
	color: var(--ink);
	border-radius: 2px;
	box-shadow: 0 10px 18px -8px rgba(0, 20, 10, 0.8);
}
/* the pin */
.is-style-notice::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #ff8376, #e3121e 55%, #900000);
	box-shadow: 0 4px 5px rgba(0, 20, 10, 0.6);
}
.is-style-notice a:not(.wp-block-button__link) { color: var(--ink); }
.is-style-notice a:not(.wp-block-button__link):hover { color: var(--red); }
.is-style-notice .wp-block-button__link,
.is-style-notice .wp-block-button__link:hover { color: var(--paper); }
.is-style-notice p { max-width: 62ch; }
.is-style-notice h1,
.is-style-notice h2,
.is-style-notice h3 { margin: 0 0 0.35em; text-wrap: balance; }

/* Small heading strip at the top of each notice */
.notice-head {
	gap: 12px;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ink);
	font: 600 0.85rem var(--caps);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.notice-head p { margin: 0; }
.notice-head p:last-child { color: var(--ink-soft); }

.strap {
	max-width: 40ch;
	font: 600 1.3rem/1.4 var(--caps);
	letter-spacing: 0.04em;
}
.voice { max-width: 46ch; font-size: 1.05rem; }
.small { font-size: 0.88rem; color: var(--ink-soft); }

/* Home page top notice and its stamp */
.hero-notice {
	max-width: 980px;
	margin: 16px auto 0;
	padding-bottom: 100px; /* room for the stamp */
	transform: rotate(-0.4deg);
}
.stamp {
	position: absolute;
	right: 32px;
	bottom: 20px;
	width: calc(var(--w, 220) * 0.9px);
	color: #d80011;
	transform: rotate(var(--tilt, -8deg));
	pointer-events: none;
	animation: thump 0.5s ease-out 0.4s both;
}
.stamp svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes thump {
	from { opacity: 0; transform: rotate(var(--tilt, -8deg)) scale(1.5); }
	to { opacity: 1; transform: rotate(var(--tilt, -8deg)) scale(1); }
}

/* Book sections */
.section-books,
.section-more { padding-top: 60px; }
.section-books > h2,
.section-more > h2 { color: var(--paper); }
.section-books .lede { max-width: 58ch; margin: 0 0 36px; }

/* Book cards */
.board-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 40px;
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}
.board-list > li { margin: 0; }
.board-list > li:nth-child(1) { transform: rotate(1deg); }
.board-list > li:nth-child(2) { transform: rotate(-1deg); margin-top: 24px; }
.board-list > li:nth-child(3) { transform: rotate(0.8deg); }

.app { display: flex; flex-direction: column; height: 100%; }
.app .ref {
	gap: 8px;
	margin: 0 0 12px;
	font: 800 0.75rem var(--body);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.app .ref p { margin: 0; }
.app .wp-block-post-featured-image {
	margin: 0;
	padding: 6px;
	background: var(--ink);
	overflow: hidden;
}
.app .wp-block-post-featured-image img { display: block; width: 100%; transition: transform 0.5s ease-out; }
.app .wp-block-post-featured-image a:hover img { transform: scale(1.03); }
.app .wp-block-post-title { margin: 16px 0 6px; font-size: 1.7rem; }
.app .wp-block-post-title a { text-decoration: none; }
.app .wp-block-buttons { margin-top: auto; }

.facts { gap: 2px 12px; margin: 0 0 12px; font-size: 0.92rem; }
.facts p { margin: 0; }
.status-ok { color: #005c27; font-weight: 800; }

/* Signup form */
.signup { max-width: 860px; margin: 60px auto 0; transform: rotate(0.3deg); }
.pi-signup { display: grid; gap: 14px; max-width: 560px; margin-top: 18px; }
.pi-signup label { font-size: 0.9rem; font-weight: 800; }
.pi-signup input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 2px solid var(--ink);
	border-radius: 3px;
	background: #fff;
	color: var(--ink);
	font: inherit;
}
.pi-signup input::placeholder { color: var(--ink-soft); }
.pi-signup .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.pi-signup .check input { flex: none; width: 20px; height: 20px; margin-top: 0.3em; accent-color: var(--ink); }
.pi-signup button {
	justify-self: start;
	min-height: 48px;
	padding: 12px 22px;
	border: 0;
	border-radius: 4px;
	background: var(--ink);
	color: var(--paper);
	font: 800 1rem var(--body);
	cursor: pointer;
}
.pi-signup button:hover { background: var(--red); }
/* hidden spam-trap field */
.pi-signup .hp { position: absolute; left: -9999px; }
.pi-msg { display: none; margin: 18px 0 0; padding: 12px 16px; border: 2px solid currentColor; border-radius: 3px; font-weight: 800; }
body.signup-ok .pi-msg--ok { display: block; color: #005622; }
body.signup-error .pi-msg--error { display: block; color: var(--red); }

/* Author panel */
.applicant { max-width: 980px; margin: 60px auto 0; transform: rotate(-0.3deg); }
.applicant .wp-block-image { margin: 0; }
.applicant img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid #bdc4d1; }
.applicant figcaption { margin-top: 6px; font-size: 0.8rem; color: var(--ink-soft); }
.applicant .wp-block-columns { gap: 40px; }

/* Ordinary pages */
.page-notice { max-width: 860px; margin: 16px auto 0; }
.page-notice .wp-block-post-title { margin-bottom: 0.3em; font-size: 3.5rem; }
.page-notice .entry > * + * { margin-top: 1em; }
.page-notice .entry h2 { margin-top: 1.4em; }

/* Free story download page */
.story-notice .wp-block-image { max-width: 260px; margin: 0 0 1.2em; }
.story-notice .wp-block-image img { border: 6px solid var(--ink); }
.story-notice .wp-block-buttons { gap: 12px; margin: 0.4em 0; }

/* Single book page */
.book-notice { max-width: 1000px; margin: 16px auto 0; }
.book-notice .wp-block-columns { gap: 40px; align-items: flex-start; }
.book-notice .wp-block-column:first-child { position: sticky; top: 24px; }
.book-notice .wp-block-post-featured-image { margin: 0; padding: 6px; background: var(--ink); }
.book-notice .wp-block-post-title { font-size: 3.5rem; }
.book-notice .facts { margin-top: 1.5em; }
.series-links { margin-top: 1em; font-size: 0.95rem; }

/* Review quotes */
.reps { margin-top: 2em; padding-top: 1em; border-top: 2px solid var(--ink); }
.reps blockquote { margin: 1em 0; padding: 0; border: 0; }
.reps blockquote p { margin: 0; font-style: italic; }
.reps cite { font-size: 0.85rem; font-style: normal; color: var(--ink-soft); }

/* Footer */
.site-foot {
	gap: 12px 28px;
	padding: 24px max(var(--gutter), calc((100% - 1120px) / 2)) 40px;
	background: var(--baize-dark);
	font-size: 0.9rem;
}
.site-foot p { margin: 0; }

/* Small screens */
@media (max-width: 781px) {
	.book-notice .wp-block-column:first-child { position: static; }
}
@media (max-width: 600px) {
	.is-style-notice { padding: 24px; }
	.hero-notice { padding-bottom: 100px; }
	.site-bar .wp-block-navigation { gap: 16px; }
	.strap { font-size: 1.1rem; }
	h1 { font-size: 2.6rem; }
	h2 { font-size: 1.9rem; }
	.stamp { right: 16px; width: calc(var(--w, 220) * 0.65px); }
	.board-list > li:nth-child(2) { margin-top: 0; }
	.page-notice .wp-block-post-title,
	.book-notice .wp-block-post-title { font-size: 2.4rem; }
}

/* Switch off movement for people who ask for that */
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}