/*
Theme Name: The Patch Reference
Theme URI: https://sewwhatembroiderydesigns.com/
Description: A technical reference theme for machine embroidery and patch guides. Field-manual typography, diagram-first article layouts, and block patterns for placement guides, spec tables and regulation notes. Child theme of Twenty Twenty-Five.
Author: The Patch Reference
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
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: patch-reference
Tags: block-patterns, editor-style, full-site-editing, one-column, custom-colors, custom-menu
*/

/* ---------------------------------------------------------------------------
   Almost everything is handled in theme.json. This file covers only what
   theme.json cannot express: figure/diagram treatment, table rules, and a
   handful of print styles.
   --------------------------------------------------------------------------- */

/* --- Diagram figures ----------------------------------------------------- */

.pr-figure {
	margin-block: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--surface);
}

.pr-figure__frame {
	padding: var(--wp--preset--spacing--50);
	/* Faint grid, so a placement diagram reads as a measured drawing */
	background-image:
		linear-gradient(to right, var(--wp--preset--color--rule-soft) 1px, transparent 1px),
		linear-gradient(to bottom, var(--wp--preset--color--rule-soft) 1px, transparent 1px);
	background-size: 24px 24px;
}

.pr-figure__frame svg,
.pr-figure__frame img {
	display: block;
	width: 100%;
	height: auto;
}

.pr-figure__caption {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding: 0.75rem var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.pr-figure__caption strong {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* Figure numbering — a reference site should be citable by figure */
.pr-figure__caption::before {
	content: "Fig. " counter(pr-figure) " — ";
	counter-increment: pr-figure;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
}

body { counter-reset: pr-figure; }

/* --- Regulation / caution notes ------------------------------------------ */

.pr-note {
	border-left: 3px solid var(--wp--preset--color--field);
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	margin-block: var(--wp--preset--spacing--50);
}

.pr-note--caution {
	border-left-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-soft);
}

.pr-note__label {
	display: block;
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--field);
	margin-bottom: 0.4rem;
}

.pr-note--caution .pr-note__label { color: var(--wp--preset--color--accent); }

.pr-note p:last-child { margin-bottom: 0; }

/* --- Tables: specs and measurements -------------------------------------- */

.wp-block-table table {
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-table th {
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--paper);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 0.6rem 0.85rem;
	white-space: nowrap;
}

.wp-block-table td {
	border-bottom: 1px solid var(--wp--preset--color--rule-soft);
	padding: 0.6rem 0.85rem;
	vertical-align: baseline;
}

/* Measurements line up */
.wp-block-table td:not(:first-child) { font-variant-numeric: tabular-nums; }

.wp-block-table figcaption {
	font-family: var(--wp--preset--font-family--label);
	color: var(--wp--preset--color--muted);
}

/* Wide tables scroll rather than breaking the page */
.wp-block-table { overflow-x: auto; }

/* --- Eyebrow labels ------------------------------------------------------ */

.pr-eyebrow {
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

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

.pr-card {
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--50);
	height: 100%;
}

.pr-card h3 { margin-top: 0; }
.pr-card p:last-child { margin-bottom: 0; }

/* --- Reading comfort ----------------------------------------------------- */

.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: 68ch;
}

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

a { text-underline-offset: 0.18em; }

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* --- Print: placement guides get printed and pinned up ------------------- */

@media print {
	.wp-block-navigation,
	.wp-site-blocks > footer,
	.pr-cta { display: none !important; }

	.pr-figure { break-inside: avoid; border-color: #999; }
	.pr-figure__frame { background-image: none; }
	body { font-size: 11pt; }
	a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}