/*
Theme Name: The Puzzle Brain
Theme URI: https://thepuzzlebrain.com
Description: Child theme of Twenty Twenty-Five. A puzzle magazine, not a blog. Source lives in web-work/themes/thepuzzlebrain.
Author: Vistera Ltd
Template: twentytwentyfive
Version: 0.2.0
Requires at least: 6.7
License: GNU General Public License v2 or later
Text Domain: thepuzzlebrain

Fonts: Archivo Black, Source Sans 3 and Roboto Mono, all SIL Open Font License, self-hosted in
assets/fonts so no request leaves for Google.
*/

/* ------------------------------------------------------------------ base */

:root {
	--pb-rule: 3px solid var(--wp--preset--color--ink);
}

body { -webkit-font-smoothing: antialiased; }

:where(a):focus-visible,
:where(button, summary, input, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
}

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Labels: small uppercase mono, used for kickers, categories and meta. */
.pb-kicker,
.pb-kicker a {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.pb-kicker a:hover { color: var(--wp--preset--color--red); }

/* Bullets indent, the house rule. Only lists written in the editor, which carry wp-block-list;
   the puzzle plugin's labels and word lists are laid out as grids and must stay flush. */
.pb-content :where(ul, ol).wp-block-list { padding-left: 1.5em; }

/* Text pages: a heading belongs to what follows it, so it gets more room above than below. */
.pb-content > h2.wp-block-heading { margin-block-start: 2.2rem; margin-bottom: 0.2rem; }
.pb-content > h3.wp-block-heading { margin-block-start: 1.6rem; margin-bottom: 0.1rem; }

/* ------------------------------------------------------------------ header */

.pb-head {
	border-bottom: 5px solid var(--wp--preset--color--ink);
	padding-top: 1.1rem;
	padding-bottom: 0.8rem;
}
.pb-head-inner { gap: 0.75rem 1.5rem; }

.pb-logo,
.pb-foot-brand a {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 1;
}
.pb-logo { font-size: 1.55rem; margin: 0; }
.pb-logo a,
.pb-foot-brand a { text-decoration: none; color: var(--wp--preset--color--ink); }
.pb-logo span,
.pb-foot-brand span { color: var(--wp--preset--color--red); }

.pb-nav { gap: 0.3rem 1.1rem; }
.pb-nav .wp-block-navigation-item__content {
	text-decoration: none;
	border-bottom: 3px solid transparent;
	padding-bottom: 0.1rem;
}
.pb-nav .wp-block-navigation-item__content:hover,
.pb-nav .current-menu-item > .wp-block-navigation-item__content,
.pb-nav [aria-current="page"] {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--red);
}

@media (max-width: 30rem) {
	.pb-nav { gap: 0.3rem 0.8rem; }
}

/* ------------------------------------------------------------------ main */

.pb-main {
	padding-top: 1.6rem;
	padding-bottom: 4rem;
}
.pb-main > * + * { margin-block-start: 1.1rem; }

.pb-intro { gap: 0.8rem; }
.pb-intro h1 { margin: 0; }

.pb-tagline {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--ink-soft);
	max-width: 36rem;
	margin: 0.6rem 0 0;
	line-height: 1.4;
}

.pb-promise {
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.pb-promise li {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	padding: 0.34em 0.7em;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}
.pb-promise li:nth-child(2) { background: var(--wp--preset--color--red); color: var(--wp--preset--color--card); }
.pb-promise li:nth-child(3) { background: var(--wp--preset--color--blue); color: var(--wp--preset--color--card); }

/* Section heads: a heavy rule under the heading, as in a magazine's contents page. */
.pb-main .pb-sec-head {
	border-bottom: var(--pb-rule);
	padding-bottom: 0.35rem;
	margin-block-start: 2.8rem;
	margin-bottom: 0;
}

.pb-empty { color: var(--wp--preset--color--muted); }

/* ------------------------------------------------------------------ cards */

.pb-cards { gap: 0.9rem; }
.pb-card {
	background: var(--wp--preset--color--card);
	border: 2px solid var(--wp--preset--color--ink);
	padding: 0.8rem 0.9rem;
	gap: 0.35rem;
	height: 100%;
}
.pb-card:hover { border-color: var(--wp--preset--color--red); }
.pb-card .wp-block-post-title {
	font-size: 0.98rem;
	margin: 0;
}
.pb-card .wp-block-post-title a { text-decoration: none; }

/* ------------------------------------------------------------------ tiles */

.wp-block-group.pb-tiles { gap: 0.8rem !important; }
.pb-tile { margin: 0; }
.pb-tile a {
	display: grid;
	gap: 0.2rem;
	height: 100%;
	background: var(--wp--preset--color--card);
	border: 2px solid var(--wp--preset--color--ink);
	padding: 0.85rem;
	text-decoration: none;
	align-content: start;
}
.pb-tile a:hover { border-color: var(--wp--preset--color--red); color: var(--wp--preset--color--ink); }
.pb-tile strong {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: 1rem;
	line-height: 1.1;
}
.pb-tile span { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

/* ------------------------------------------------------------------ single */

.pb-crumbs { margin-bottom: -0.4rem; }
.pb-main .wp-block-query-title { margin: 0; }
.pb-intro-text { color: var(--wp--preset--color--ink-soft); max-width: 40rem; }

.wp-block-query-pagination { margin-top: 1.6rem; font-weight: 700; }

/* ------------------------------------------------------------------ footer */

.pb-foot {
	border-top: var(--pb-rule);
	padding-top: 1.2rem;
	padding-bottom: 2.5rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}
.pb-foot-inner { gap: 0.8rem 2rem; }
.pb-foot p { margin: 0; }
.pb-foot-brand a { font-size: 1.15rem; display: inline-block; margin-bottom: 0.3rem; }
.pb-foot-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; }
.pb-foot-links a { color: var(--wp--preset--color--ink); font-weight: 700; }
/* No max-width of its own: constrained layout centres any child narrower than the content
   width, which pushed this paragraph off the left edge the rest of the footer shares. */
.pb-foot .pb-legal { margin-top: 1rem; line-height: 1.5; }
.pb-legal a { color: var(--wp--preset--color--muted); }

/* ------------------------------------------------------------------ print */

@media print {
	.pb-head, .pb-foot { display: none; }
	body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}