/*
Theme Name: Clarity
Description: A calm, readable block theme for a psychology practice: articles, research, and counselling bookings.
Version: 0.3.2
Requires at least: 6.5
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: clarity
Tags: blog, one-column, block-styles, full-site-editing, wide-blocks, accessibility-ready
*/

/* Most styling lives in theme.json. This file holds the few things theme.json can't express. */

:where(.wp-site-blocks) *:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.skip-link:focus {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Article cards in query loops */
.clarity-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clarity-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(43, 42, 40, 0.08);
}

@media (prefers-reduced-motion: reduce) {
	.clarity-card,
	.clarity-card:hover {
		transition: none;
		transform: none;
	}
}

/* Unstyled link lists (footer) */
.clarity-plain-list {
	list-style: none;
	padding-left: 0;
}

/* Comfortable reading measure for long-form articles */
.clarity-prose > p,
.clarity-prose > ul,
.clarity-prose > ol {
	hyphens: auto;
}

/* Outline buttons: theme colour instead of inherited text colour */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--primary-dark);
	border-color: currentColor;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}

/* Hero: resilience journey steps */
.clarity-journey {
	gap: 1.4rem !important;
}

.clarity-journey .clarity-journey__step {
	position: relative;
	margin: 0;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

.clarity-journey .clarity-journey__step:not(:last-child)::after {
	content: "→";
	position: absolute;
	right: -1.1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.clarity-journey .clarity-journey__step.is-finish {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}