/*
Theme Name: The Sorting Agent
Theme URI: https://www.thesortingagent.com
Author: Adam Turnbull
Description: Portfolio theme for thesortingagent.com. Interview-deck look in hot pink and violet: torn paper, marker strips, sticker icons. Tools and community groups are their own content types.
Version: 1.0.0
Requires at least: 6.7
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: sorting-agent
*/

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ---------- tokens ---------- */
:root {
	--sa-ink: var(--wp--preset--color--ink);
	--sa-paper: var(--wp--preset--color--paper);
	--sa-pink: var(--wp--preset--color--pink);
	--sa-violet: var(--wp--preset--color--violet);
	--sa-lavender: var(--wp--preset--color--lavender);
	--sa-display: var(--wp--preset--font-family--display);
	--sa-body: var(--wp--preset--font-family--body);
	--sa-hand: var(--wp--preset--font-family--hand);
	--sa-torn: polygon(0 3%, 4% 0, 10% 2%, 18% 0, 27% 2%, 36% 0, 46% 2%, 56% 0, 66% 2%, 76% 0, 87% 2%, 100% 0, 100% 97%, 94% 100%, 84% 98%, 73% 100%, 62% 98%, 51% 100%, 39% 98%, 27% 100%, 15% 98%, 6% 100%, 0 97%);
	--sa-strip-edge: polygon(0 8%, 6% 0, 20% 6%, 40% 0, 60% 5%, 80% 0, 100% 6%, 99% 92%, 94% 100%, 75% 94%, 55% 100%, 35% 95%, 15% 100%, 1% 93%);
}

html {
	scroll-padding-top: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

:focus-visible {
	outline: 3px solid var(--sa-violet);
	outline-offset: 3px;
}

.sa-contact :focus-visible,
.sa-footer :focus-visible {
	outline-color: var(--sa-paper);
}

.sa-pink {
	color: var(--sa-pink);
}

/* ---------- header ---------- */
/* no block-gap between top-level site blocks (header, main, footer) */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > footer {
	margin-top: auto;
}

.sa-header {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-block: 14px;
	padding-inline: var(--wp--style--root--padding-left, 1rem);
	gap: 8px 24px;
}

.sa-brand,
.sa-brand a {
	font-family: var(--sa-display);
	font-weight: 900;
	font-size: 1.6rem;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sa-ink);
	margin: 0;
}

.sa-nav a {
	font-family: var(--sa-display);
	font-weight: 800;
	font-size: 1.15rem;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sa-ink);
}

.sa-nav a:hover {
	color: var(--sa-violet);
}

/* ---------- hero ---------- */
.sa-hero {
	gap: 2rem;
	padding-block: 1.5rem 2.5rem;
}

.sa-hero__title {
	margin: 0;
	line-height: 0.85;
}

.sa-strip {
	display: inline-block;
	background: var(--sa-ink);
	color: var(--sa-paper);
	font-family: var(--sa-hand);
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.2;
	padding: 0.45rem 1.1rem;
	transform: rotate(-2deg);
	clip-path: var(--sa-strip-edge);
	margin-block: 1rem 0.5rem;
}

.sa-strip--violet {
	background: var(--sa-violet);
}

.sa-photo {
	max-width: 260px;
	margin-inline: auto;
	transform: rotate(3deg);
}

.sa-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 4px solid var(--sa-ink);
	box-shadow: 8px 8px 0 var(--sa-pink);
	background: var(--sa-lavender);
}

/* ---------- sections ---------- */
.sa-section {
	padding-block: 2rem;
}

.sa-section > h2 {
	margin-bottom: 1rem;
}

/* ---------- buttons ---------- */
.sa-btn,
.wp-block-button__link {
	display: inline-block;
	font-family: var(--sa-display);
	font-weight: 900;
	font-size: 1.05rem;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.75rem 1.25rem;
	background: var(--sa-ink);
	color: var(--sa-paper);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.sa-btn:hover,
.wp-block-button__link:hover {
	background: var(--sa-violet);
	color: #fff;
}

.sa-btn--pink {
	background: var(--sa-pink);
	color: #fff;
}

.sa-btn--pink:hover {
	background: var(--sa-ink);
	color: #fff;
}

.sa-more {
	text-align: center;
	margin-top: 1.25rem;
}

/* ---------- filter chips ---------- */
.sa-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.sa-chip {
	font-family: var(--sa-display);
	font-weight: 800;
	font-size: 0.95rem;
	line-height: 1;
	text-transform: uppercase;
	padding: 0.55rem 0.95rem;
	border: 2px solid var(--sa-ink);
	background: var(--sa-paper);
	color: var(--sa-ink);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.sa-chip[aria-pressed="true"] {
	background: var(--sa-ink);
	color: var(--sa-paper);
}

/* ---------- tool cards and group cards ---------- */
.sa-grid,
.sa-groups {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}

.sa-card,
.sa-group {
	background: var(--sa-lavender);
	color: var(--sa-ink);
	padding: 1.4rem 1.1rem 1.1rem;
	clip-path: var(--sa-torn);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1rem;
	align-content: start;
}

[hidden] {
	display: none !important;
}

.sa-card__title,
.sa-group__name {
	font-size: 1.4rem;
	margin: 0;
}

.sa-card__title a {
	color: var(--sa-ink);
	text-decoration: none;
}

.sa-card__title a:hover {
	text-decoration: underline;
}

.sa-card__summary,
.sa-group__body p {
	margin: 0.35rem 0 0;
	font-size: 0.95rem;
	line-height: 1.4;
}

.sa-card__foot {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
}

.sa-card__live,
.sa-group__link {
	font-weight: 700;
	color: var(--sa-violet);
}

.sa-group__link {
	display: inline-block;
	margin-top: 0.5rem;
}

.sa-group__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.sa-empty {
	font-weight: 700;
}

/* ---------- tags ---------- */
.sa-tag {
	display: inline-block;
	font-family: var(--sa-display);
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.4rem 0.85rem;
}

.sa-tag--live {
	background: var(--sa-pink);
	color: #fff;
}

.sa-tag--trial {
	background: var(--sa-violet);
	color: #fff;
}

.sa-tag--prototype {
	background: transparent;
	color: var(--sa-ink);
	box-shadow: inset 0 0 0 2px var(--sa-ink);
}

/* ---------- sticker icons ---------- */
.sa-icon {
	display: block;
	width: 56px;
	height: 56px;
	overflow: visible;
}

.sa-icon__blob {
	fill: var(--sa-pink);
}

.sa-icon__glyph {
	fill: var(--sa-ink);
	stroke: #fff;
	stroke-width: 5;
	paint-order: stroke;
	stroke-linejoin: round;
}

.sa-icon-img,
.sa-group__logo {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

/* group monogram sticker */
.sa-mono {
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sa-pink);
	color: #fff;
	font-family: var(--sa-display);
	font-weight: 900;
	font-size: 1.7rem;
	line-height: 1;
	border: 3px solid var(--sa-ink);
	box-shadow: 3px 3px 0 var(--sa-ink);
	transform: rotate(-3deg);
}

.sa-group:nth-child(even) .sa-mono {
	background: var(--sa-violet);
	color: #fff;
	transform: rotate(3deg);
}

/* ---------- tool page header ---------- */
.sa-toolhead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 1rem;
}

.sa-toolhead .sa-icon,
.sa-toolhead .sa-icon-img {
	width: 96px;
	height: 96px;
}

.sa-toolhead__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

/* ---------- tool video ---------- */
.sa-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 4px solid var(--sa-ink);
	box-shadow: 8px 8px 0 var(--sa-pink);
	margin-block: 1.5rem 2.5rem;
}

.sa-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- about strip ---------- */
.sa-about {
	gap: 2rem;
	padding-block: 2rem;
}

.sa-stats {
	gap: 1rem;
}

.sa-stat {
	margin: 0;
	background: var(--sa-violet);
	color: #fff;
	padding: 0.6rem 0.9rem;
	font-family: var(--sa-display);
	font-weight: 900;
	font-size: 2.4rem;
	line-height: 0.9;
	text-transform: uppercase;
	transform: rotate(-2deg);
}

.sa-stat:nth-child(2) {
	background: var(--sa-pink);
	color: #fff;
	transform: rotate(2deg);
}

.sa-stat small {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--sa-body);
	font-weight: 500;
	font-size: 0.8rem;
	line-height: 1.2;
	text-transform: none;
}

/* ---------- contact band and form ---------- */
.sa-contact {
	background: var(--sa-violet);
	color: #fff;
	padding-block: 2.5rem;
	margin-top: 2rem;
}

.sa-contact a {
	color: #fff;
}

.sa-form {
	display: grid;
	gap: 0.9rem;
	max-width: 560px;
}

.sa-form label {
	display: grid;
	gap: 0.3rem;
	font-weight: 700;
}

.sa-form input[type="text"],
.sa-form input[type="email"],
.sa-form textarea {
	font: inherit;
	width: 100%;
	padding: 0.7rem;
	border: 3px solid var(--sa-ink);
	border-radius: 0;
	background: var(--sa-paper);
	color: var(--sa-ink);
}

.sa-form .sa-btn {
	justify-self: start;
	background: var(--sa-pink);
	color: #fff;
}

.sa-form .sa-btn:hover {
	background: var(--sa-ink);
	color: #fff;
}

.sa-form .sa-btn[disabled] {
	opacity: 0.6;
	cursor: wait;
}

.sa-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sa-form__status {
	margin: 0;
	min-height: 1.5em;
	font-weight: 700;
}

.sa-form__status[data-kind="error"] {
	background: var(--sa-paper);
	color: var(--sa-ink);
	padding: 0.4rem 0.6rem;
	border-left: 6px solid var(--sa-pink);
}

/* ---------- footer ---------- */
.sa-footer {
	background: var(--sa-ink);
	color: #fff;
	padding-block: 1.25rem;
	padding-inline: var(--wp--style--root--padding-left, 1rem);
}

.sa-footer a {
	color: #fff;
}

.sa-footer p {
	margin: 0;
}

/* ---------- small screens ---------- */
@media (max-width: 781px) {
	.sa-hero {
		padding-block-end: 1.5rem;
	}

	.sa-photo {
		max-width: 200px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
	.sa-strip, .sa-photo, .sa-mono, .sa-stat {
		transform: none !important;
	}
}