/*
Theme Name: All Fourths
Theme URI: https://allfourths.com
Description: Child theme of Twenty Twenty-Five for allfourths.com — the site of "Reimagine the All Fourths Guitar Fingerboard" by Ruy Mendes-Reis.
Author: Ruy Mendes-Reis
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: allfourths
*/

/* ---------------------------------------------------------------
   1. Base
   --------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.wp-block-post-title {
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}

/* Visible keyboard focus everywhere. */
:where(a, button, input, textarea, summary, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--brass);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------
   2. Header / footer
   --------------------------------------------------------------- */

.af-header {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.af-header .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.af-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.01em;
}

.af-footer {
	border-top: 1px solid var(--wp--preset--color--rule);
}

/* ---------------------------------------------------------------
   3. The fingerboard matrix — the one bold element on the page
   --------------------------------------------------------------- */

.af-matrix {
	width: 100%;
	height: auto;
	display: block;
}

.af-matrix .af-fret {
	stroke: var(--wp--preset--color--rule);
	stroke-width: 1;
}

.af-matrix .af-string {
	stroke: #b9b5a8;
	stroke-width: 1;
}

.af-matrix .af-nut {
	stroke: var(--wp--preset--color--ink);
	stroke-width: 4;
}

.af-matrix .af-dot {
	fill: var(--wp--preset--color--ink);
}

.af-matrix .af-dot-accent {
	fill: var(--wp--preset--color--brass);
}

.af-matrix .af-inlay {
	fill: #d7d3c6;
}

.af-matrix .af-caption {
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	fill: var(--wp--preset--color--slate);
}

/* Draw the repeating shape once on load, then leave the page still. */
@media (prefers-reduced-motion: no-preference) {
	.af-matrix .af-shape {
		animation: af-shape-in 0.7s ease-out both;
	}
	.af-matrix .af-shape-2 { animation-delay: 0.35s; }
	.af-matrix .af-shape-3 { animation-delay: 0.7s; }

	@keyframes af-shape-in {
		from { opacity: 0; transform: translateX(-10px); }
		to   { opacity: 1; transform: translateX(0); }
	}
}

/* ---------------------------------------------------------------
   4. Sections
   --------------------------------------------------------------- */

.af-hero h1 {
	max-width: 20ch;
}

.af-lede {
	max-width: 46ch;
}

/* Statement band: the claim, set large, nothing else in the row. */
.af-statement {
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.af-statement p {
	max-width: 34ch;
	font-family: var(--wp--preset--font-family--display);
	line-height: 1.25;
}

/* Benefit rows — data, not cards. A hairline separates each claim. */
.af-benefit {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: var(--wp--preset--spacing--30);
}

.af-benefit h3 {
	margin-bottom: 0.4em;
}

.af-benefit img {
	max-width: 88px;
	height: auto;
}

/* Feature grid: eight qualities of the book. */
.af-features .wp-block-column {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: var(--wp--preset--spacing--20);
}

.af-features h3 {
	font-size: var(--wp--preset--font-size--medium);
	margin: 0.6em 0 0.3em;
}

.af-features p {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
	margin: 0;
}

.af-features img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* "Consider this book if you" — a list of conditions, numbered because
   they are alternatives the reader checks against, not steps. */
.af-consider > .wp-block-group {
	border-left: 2px solid var(--wp--preset--color--brass);
	padding-left: var(--wp--preset--spacing--20);
}

.af-consider h3 {
	font-size: var(--wp--preset--font-size--medium);
}

/* Chapter list on the book page. */
.af-chapters .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 0.9rem 0;
}

.af-chapters .wp-block-details summary,
.af-faq .wp-block-details summary {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.af-chapters .wp-block-details summary::-webkit-details-marker,
.af-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.af-chapters .wp-block-details summary::before,
.af-faq .wp-block-details summary::before {
	content: "+";
	color: var(--wp--preset--color--brass);
	font-weight: 500;
	transform: translateY(-0.05em);
}

.af-chapters .wp-block-details[open] summary::before,
.af-faq .wp-block-details[open] summary::before {
	content: "–";
}

.af-chapters .wp-block-details p,
.af-faq .wp-block-details p {
	max-width: 68ch;
	margin: 0.7rem 0 0.2rem 1.5rem;
	color: var(--wp--preset--color--slate);
}

.af-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 0.9rem 0;
}

/* Price line on the book page. */
.af-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
}

.af-price small {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
	margin-top: 0.5rem;
}

/* ---------------------------------------------------------------
   5. Payhip buttons
   --------------------------------------------------------------- */

.af-buy,
.af-buy:visited {
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1;
	padding: 1.05em 1.9em;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 2px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.af-buy:hover {
	background: var(--wp--preset--color--brass);
	border-color: var(--wp--preset--color--brass);
	color: #fff;
}

.af-buy--secondary,
.af-buy--secondary:visited {
	background: transparent;
	color: var(--wp--preset--color--ink);
}

.af-buy--secondary:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--ink);
}

.af-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	align-items: center;
}

.af-note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
}

/* ---------------------------------------------------------------
   6. Gallery of spreads
   --------------------------------------------------------------- */

.af-spreads figure img {
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--rule);
}

/* ---------------------------------------------------------------
   7. Small screens
   --------------------------------------------------------------- */

@media (max-width: 781px) {
	.af-statement p {
		max-width: none;
	}
	.af-hero h1 {
		max-width: none;
	}
}