/*
Theme Name:  Just Ties
Theme URI:   https://just-ties.com
Author:      Just Ties
Description: Block theme for Just Ties. Dark, tactile, restrained.
Version:     0.2.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.3
License:     Proprietary
Text Domain: just-ties
*/

/* Tokens live in theme.json. This file is for what theme.json cannot express. */

:where(body) {
	-webkit-font-smoothing: antialiased;
}

/* Focus must stay visible. Never remove this without replacing it. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--jt-copper);
	outline-offset: 2px;
	border-radius: 2px;
}

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

/*
 * Quick exit.
 *
 * Reachable from anywhere, obvious to someone who needs it, unobtrusive to
 * everyone else. This is a safety control, not a decoration: do not move it
 * behind a menu, and do not animate it.
 */
.jt-quick-exit {
	position: fixed;
	inset-block-start: calc(env(safe-area-inset-top, 0px) + 0.5rem);
	inset-inline-end: 0.5rem;
	z-index: 9999;
	padding: 0.4rem 0.8rem;
	font-size: 0.8125rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--jt-line);
	background: var(--wp--preset--color--jt-surface);
	color: var(--wp--preset--color--jt-text);
	cursor: pointer;
}

.jt-skip-link:focus {
	position: fixed;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 10000;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--jt-surface);
	color: var(--wp--preset--color--jt-text);
}

/* ---------------------------------------------------------------------------
 * Forms
 *
 * The rule that matters here is proximity: things that belong together sit
 * close, things that do not sit apart. Without it a label is just text above a
 * box, and the box above it looks like it owns the text — which is exactly
 * what happened on /join, where "Email address" read as a caption under the
 * scene name field and people filled the form one field out of step.
 *
 * So: tight inside a field, generous between fields. Every number below is
 * either small (within) or large (between), and nothing is in the middle.
 * ------------------------------------------------------------------------ */

.jt-form {
	--jt-within: 0.4rem;
	--jt-between: 2.25rem;

	max-width: 34rem;
	margin-block: var(--wp--preset--spacing--30, 1.5rem);
}

.jt-field {
	margin-block-end: var(--jt-between);
}

/* The label owns the field below it, so it is the loudest thing in the group. */
.jt-field > label {
	display: block;
	margin-block-end: var(--jt-within);
	font-weight: 600;
	line-height: 1.3;
}

.jt-field__hint {
	margin-block: 0 0.6rem;
	color: var(--wp--preset--color--jt-muted);
	font-size: 0.875rem;
	line-height: 1.45;
}

.jt-field input[type="text"],
.jt-field input[type="email"],
.jt-field input[type="password"],
.jt-field input[type="url"],
.jt-field input[type="tel"],
.jt-field select,
.jt-field textarea {
	display: block;
	width: 100%;
	padding: 0.65rem 0.75rem;
	font: inherit;
	color: var(--wp--preset--color--jt-text);
	background: var(--wp--preset--color--jt-raised);
	border: 1px solid var(--wp--preset--color--jt-line);
	border-radius: 0.35rem;
}

/* A two-letter country code does not need a field the width of the page. */
.jt-field input[size="2"] {
	width: 5rem;
}

.jt-field input:hover,
.jt-field select:hover,
.jt-field textarea:hover {
	border-color: var(--wp--preset--color--jt-jute);
}

/*
 * Checkboxes and radios read left to right, so the control sits beside its
 * words rather than above them — and the whole label is the target, because a
 * 13-pixel box is not a target.
 */
.jt-field--check > label,
.jt-field--radio > label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.7rem;
	align-items: start;
	margin-block-end: 0;
	padding-block: 0.35rem;
	font-weight: 400;
	cursor: pointer;
}

.jt-field--check input,
.jt-field--radio input {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	margin-block-start: 0.15rem;
	accent-color: var(--wp--preset--color--jt-copper);
	cursor: pointer;
}

/* Grouped choices belong to each other, so they sit closer than fields do. */
.jt-field--check,
.jt-field--radio {
	margin-block-end: 0.9rem;
}

.jt-field--radio .jt-field__label {
	font-weight: 600;
}

.jt-field--radio .jt-field__hint {
	grid-column: 2;
	margin-block: 0.1rem 0;
}

/* The last choice in a run still needs the full gap before whatever follows. */
.jt-field--check + :not(.jt-field--check),
.jt-field--radio + :not(.jt-field--radio) {
	margin-block-start: var(--jt-between);
}

/* --- When something is wrong ---------------------------------------------- */

/*
 * A red border alone is not a message, and on a form somebody has already
 * filled once it is not even a location. The bar marks the field, the text
 * says what to do, and the summary at the top says it again for anyone who
 * submitted from the bottom of a long form.
 */
.jt-field--invalid {
	padding-inline-start: 0.9rem;
	border-inline-start: 3px solid var(--wp--preset--color--jt-wine);
}

.jt-field--invalid input,
.jt-field--invalid select,
.jt-field--invalid textarea {
	border-color: var(--wp--preset--color--jt-wine);
}

.jt-field__error {
	margin-block: 0.4rem 0;
	color: var(--wp--preset--color--jt-wine);
	font-size: 0.875rem;
	font-weight: 600;
}

.jt-form__error {
	margin-block-end: var(--jt-between);
	padding: 0.8rem 1rem;
	color: var(--wp--preset--color--jt-text);
	background: var(--wp--preset--color--jt-surface);
	border: 1px solid var(--wp--preset--color--jt-wine);
	border-inline-start-width: 3px;
	border-radius: 0.35rem;
}

/* --- Sections, buttons and the quiet text --------------------------------- */

.jt-fieldset {
	margin: 0 0 var(--jt-between);
	padding: 0;
	border: 0;
}

.jt-fieldset > legend {
	display: block;
	width: 100%;
	margin-block-end: 0.8rem;
	padding-block-end: 0.5rem;
	border-block-end: 1px solid var(--wp--preset--color--jt-line);
	font-size: 1.125rem;
	font-weight: 600;
}

.jt-button {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	font: inherit;
	font-weight: 600;
	color: var(--wp--preset--color--jt-text);
	background: var(--wp--preset--color--jt-raised);
	border: 1px solid var(--wp--preset--color--jt-line);
	border-radius: 0.35rem;
	cursor: pointer;
}

.jt-button:hover {
	border-color: var(--wp--preset--color--jt-copper);
}

.jt-button--primary {
	color: var(--wp--preset--color--jt-ground);
	background: var(--wp--preset--color--jt-copper);
	border-color: var(--wp--preset--color--jt-copper);
}

.jt-button--primary:hover {
	background: var(--wp--preset--color--jt-jute);
	border-color: var(--wp--preset--color--jt-jute);
}

/*
 * Said immediately before the button, because that is the moment somebody
 * decides whether to press it.
 */
.jt-form__reassurance {
	margin-block: var(--jt-between) 1rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--wp--preset--color--jt-line);
	color: var(--wp--preset--color--jt-muted);
	font-size: 0.9375rem;
}

.jt-form__aside {
	margin-block-start: 1.25rem;
	font-size: 0.9375rem;
}

.jt-notice {
	margin-block-end: 1.5rem;
	padding: 0.8rem 1rem;
	background: var(--wp--preset--color--jt-surface);
	border: 1px solid var(--wp--preset--color--jt-line);
	border-inline-start: 3px solid var(--wp--preset--color--jt-copper);
	border-radius: 0.35rem;
}

.jt-notice--ok {
	border-inline-start-color: var(--wp--preset--color--jt-jute);
}

.jt-callout {
	margin-block-end: var(--jt-between);
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--jt-surface);
	border: 1px solid var(--wp--preset--color--jt-line);
	border-radius: 0.5rem;
}

.jt-callout > h2 {
	margin-block: 0 0.5rem;
	font-size: 1.125rem;
}

/* An account that cannot be reached yet is waiting on one thing. Say so. */
.jt-callout--pending {
	border-inline-start: 3px solid var(--wp--preset--color--jt-copper);
}

/*
 * Who can message you.
 *
 * Given weight on the page on purpose. Where a control sits, and how loudly,
 * is part of what it means — and this is the one that decides who can reach
 * somebody. It does not belong down among the optional questions, looking
 * like one of them.
 */
.jt-fieldset--contact {
	padding: 1.25rem;
	background: var(--wp--preset--color--jt-surface);
	border: 1px solid var(--wp--preset--color--jt-line);
	border-radius: 0.5rem;
}

.jt-fieldset--contact > legend {
	padding-inline: 0.5rem;
	border-block-end: 0;
	margin-block-end: 0.25rem;
}

.jt-account__stage {
	color: var(--wp--preset--color--jt-muted);
	font-size: 0.9375rem;
}

/*
 * Export and erasure. Two separate forms, and the space between them is the
 * point: one of them cannot be undone, and it must not be a neighbour of the
 * one that can.
 */
.jt-account__rights {
	max-width: 34rem;
	margin-block-start: 3rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--wp--preset--color--jt-line);
}

.jt-account__rights-actions {
	display: grid;
	gap: 2.25rem;
	margin-block-start: 1.5rem;
}

.jt-account__rights-actions ul {
	margin-block: 0.5rem 0;
	padding-inline-start: 1.2rem;
	color: var(--wp--preset--color--jt-muted);
	font-size: 0.875rem;
}

.jt-account__rights-actions li {
	margin-block-end: 0.35rem;
}

.jt-account__signout {
	margin-block-start: 2.5rem;
}