/*
Theme Name: Penntos Site
Theme URI: https://penntos.site
Author: Penntos Digital
Description: The Penntos Digital storefront — brand, catalogue, live demos and the list. Dark ground, gold accents. Not one of the ten product designs; it is the shop window. Requires no plugins and no parent theme.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: penntos-site
Tags: full-site-editing, one-column, wide-blocks, accessibility-ready
*/

/* Block themes take their styling from theme.json. Only what theme.json cannot express
   lives here — the catalogue grid, the sign-up form, and the brand's few set pieces.
   Keep this short on purpose.

   Colour comes from the theme.json palette. Two derived values live here because they are
   not colours anyone should be picking in the editor: a dimmed gold for hairlines, and the
   rule shorthand. Measured contrast on the ground: parchment 14.75:1, gold 7.85:1,
   muted 7.19:1 — all AAA for body text. */

:root {
	--penntos-gold-dim: #8C6F2A;
	--penntos-rule: 1px solid var(--wp--preset--color--line);
}

/* Screen-reader-only text. WordPress ships this class but block themes do not style it. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto; height: auto;
	clip-path: none; margin: 0;
}

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

/* The hero emphasis device — a roman serif with one italic word (DECISIONS D10). The brand
   uses its own specification; that is the point. */
.penntos-em {
	font-style: italic;
	font-weight: 500;
}

.penntos-mark { display: block; flex: none; }

/* Small caps label, used for section eyebrows. Matches the DIGITAL in the lockup. */
.penntos-eyebrow {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

/* ── Header and footer ─────────────────────────────────────────────────────────────── */

.penntos-brand {
	display: flex;
	align-items: center;
	gap: 0.6em;
	text-decoration: none;
	color: var(--wp--preset--color--parchment);
}
.penntos-brand:hover { text-decoration: none; }
.penntos-brand__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 560;
	letter-spacing: -0.015em;
	line-height: 1;
}
.penntos-brand__name span { color: var(--wp--preset--color--muted); }
.penntos-brand .penntos-mark { color: var(--wp--preset--color--gold); }

.penntos-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: center;
	font-size: var(--wp--preset--font-size--small);
}
.penntos-nav a { text-decoration: none; }
.penntos-nav a:hover { text-decoration: underline; }

/* ── The design grid ───────────────────────────────────────────────────────────────── */

.penntos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.penntos-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface);
	border: var(--penntos-rule);
	border-radius: 3px;
	overflow: hidden;
}

/* The palette is the product preview until real screenshots exist. Five bands in catalogue
   order, so two designs are never shown in a different sequence to each other. */
.penntos-card__swatches { display: flex; height: 5.5rem; }
.penntos-card__swatches span { flex: 1; }

.penntos-card__body {
	padding: 1.1rem 1.2rem 1.3rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1;
}
.penntos-card__name {
	font-size: 1.35rem;
	margin: 0;
}
.penntos-card__type,
.penntos-card__meta,
.penntos-card__link { margin: 0; }
.penntos-card__type {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}
.penntos-card__meta {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
}
.penntos-card__link { margin-top: auto; padding-top: 0.9rem; font-size: var(--wp--preset--font-size--small); }

.penntos-pill {
	display: inline-block;
	padding: 0.2em 0.6em;
	border-radius: 2px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.penntos-pill--live { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ground); }
.penntos-pill--wip  { background: transparent; color: var(--wp--preset--color--muted); box-shadow: inset 0 0 0 1px var(--wp--preset--color--line); }

/* ── Prices ────────────────────────────────────────────────────────────────────────── */

.penntos-prices { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.penntos-prices li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: var(--penntos-rule);
}
.penntos-prices li:first-child { border-top: var(--penntos-rule); }
.penntos-prices__label { font-weight: 500; }
.penntos-prices__value { white-space: nowrap; }
.penntos-prices__value { display: flex; align-items: baseline; gap: 0.7rem; }
.penntos-prices__value strong { font-size: 1.15em; font-weight: 600; color: var(--wp--preset--color--gold); }
.penntos-prices__full {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}
/* The struck list price lives in the Etsy listing template, not here — see the note on the
   renderer. On the dark ground it is dimmed gold rather than a red, which would be the only
   other hue in the system. */
.penntos-listing-price s { color: var(--penntos-gold-dim); margin-right: 0.4em; }

/* ── Sign-up ───────────────────────────────────────────────────────────────────────── */

.penntos-signup__form {
	max-width: 34rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
}
.penntos-signup__input {
	flex: 1 1 16rem;
	min-width: 0;
	padding: 0.85em 1em;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--parchment);
	background: var(--wp--preset--color--ground);
	border: 1px solid var(--penntos-gold-dim);
	border-radius: 2px;
}
.penntos-signup__input:focus { border-color: var(--wp--preset--color--gold); }
.penntos-signup__input::placeholder { color: var(--wp--preset--color--muted); opacity: 0.7; }
.penntos-signup__button { flex: 0 0 auto; cursor: pointer; border: 0; }
.penntos-signup__small {
	margin: 0.85rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}
/* Honeypot: present in the DOM, never visible, never announced. */
.penntos-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}
.penntos-note {
	margin: 0 0 1rem;
	padding: 0.75em 1em;
	border-left: 3px solid var(--wp--preset--color--gold);
	background: var(--wp--preset--color--ground);
	font-size: var(--wp--preset--font-size--small);
}
.penntos-note--error { border-left-color: var(--penntos-gold-dim); }

/* ── Steps ─────────────────────────────────────────────────────────────────────────── */

.penntos-steps { counter-reset: step; }
.penntos-steps .wp-block-column { position: relative; padding-top: 2.75rem; }
.penntos-steps .wp-block-column::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	top: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	line-height: 1;
	color: var(--penntos-gold-dim);
}

@media (prefers-reduced-motion: no-preference) {
	.penntos-card { transition: border-color 140ms ease; }
	.penntos-card:hover { border-color: var(--penntos-gold-dim); }
}

/* ── Measure ───────────────────────────────────────────────────────────────────────────
   Sections that hold a grid are wide; the prose inside them is not. A 1180px line of body
   text is unreadable, so measure is set on the paragraph rather than on its container —
   which lets a heading, a grid and a paragraph share one left edge. */

.penntos-measure { max-width: 62ch; }
.penntos-measure-lead { max-width: 46ch; }
.penntos-measure-display { max-width: 15ch; }

/* WordPress's constrained layout centres every child with `margin-left/right: auto` and
   an !important, so a narrower measure inside a wide section floats to the middle and
   loses its left edge against the grid. Matching the !important is the only way back. */
.penntos-measure,
.penntos-measure-lead,
.penntos-measure-display,
.penntos-prices {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}