/*
Theme Name:   Steady Hands
Theme URI:    https://example.com/
Description:  Child theme for a generalist's homepage. Carries the palette, type scale and page patterns. The project map lives in the Untangle Graph plugin, not here, so a future redesign does not take the map down with it.
Author:       you
Author URI:   https://example.com/
Template:     twentytwentyfive
Version:      1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  steady-hands
Tags:         one-column, block-patterns, full-site-editing

  ────────────────────────────────────────────────────────────────────────────
  ON TWENTY TWENTY-FOUR INSTEAD OF TWENTY TWENTY-FIVE?
  Change the Template: line above to  twentytwentyfour  and nothing else.
  ────────────────────────────────────────────────────────────────────────────

  Almost all styling is in theme.json. What lives here is the small set of
  things theme.json has no vocabulary for: the highlighter, the pills, the
  eyebrow labels. If you find yourself adding colours or sizes below, they
  probably belong in theme.json instead, where the editor can see them.
*/

/* --------------------------------------------------------------------------
   Type detail
   Archivo carries a width axis. The hero runs slightly expanded — it reads as
   signage rather than as a headline, which is the point: steady, structural,
   not literary.
   -------------------------------------------------------------------------- */

.sh-hero-heading {
	font-stretch: 112%;
	text-wrap: balance;
	max-width: 18ch;
}

/* The highlighter. A partial-height sweep rather than a filled block — it
   keeps the emphasis the wireframe asked for without the sticky-note effect. */
.sh-mark {
	background-image: linear-gradient(
		to top,
		var( --wp--preset--color--signal ) 0,
		var( --wp--preset--color--signal ) 34%,
		transparent 34%
	);
	padding-inline: 0.06em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.sh-tagline {
	color: var( --wp--preset--color--muted );
	font-size: var( --wp--preset--font-size--medium );
	margin-block-start: var( --wp--preset--spacing--30 );
	max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Eyebrow labels
   Mono is reserved for two things: section labels and project nodes. It means
   "machine-readable" — a small, consistent signal rather than decoration.
   -------------------------------------------------------------------------- */

.sh-eyebrow {
	color: var( --wp--preset--color--faint );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-block: 0 var( --wp--preset--spacing--30 );
}

/* --------------------------------------------------------------------------
   Skill pills
   Density is the argument. Twelve of these sitting shoulder to shoulder is
   what says "range" — do not space them out, and do not hide any behind a
   "show more".
   -------------------------------------------------------------------------- */

.sh-pill {
	margin: 0;
	padding: 0.38em 0.85em;
	border: 1.4px solid var( --wp--preset--color--hairline );
	border-radius: 999px;
	background-color: var( --wp--preset--color--panel );
	color: var( --wp--preset--color--muted );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.25;
	white-space: nowrap;
	transition: border-color 160ms ease, color 160ms ease;
}

.sh-pill:hover {
	border-color: var( --wp--preset--color--muted );
	color: var( --wp--preset--color--contrast );
}

/* --------------------------------------------------------------------------
   Closing panel
   -------------------------------------------------------------------------- */

.sh-close {
	border-radius: 12px;
}

.sh-close-line {
	color: var( --wp--preset--color--muted );
	max-width: 40ch;
}

/* --------------------------------------------------------------------------
   Header
   Three lowercase words do not need a hamburger. They wrap.
   -------------------------------------------------------------------------- */

.sh-nav {
	font-size: var( --wp--preset--font-size--small );
}

.sh-nav a {
	color: var( --wp--preset--color--faint );
	text-decoration: none;
	transition: color 160ms ease;
}

.sh-nav a:hover,
.sh-nav a:focus-visible {
	color: var( --wp--preset--color--contrast );
}

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

/* --------------------------------------------------------------------------
   Quality floor
   -------------------------------------------------------------------------- */

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

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

/* Nav items are paragraph blocks in a flex row; drop the block margin. */
.sh-nav p {
	margin: 0;
}