/*
Theme Name: StepThrough
Theme URI: https://stepthrough.au
Author: StepThrough AI
Author URI: https://stepthrough.au
Description: Custom block theme for StepThrough AI — practical AI consulting and implementation for Australian SMEs.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stepthrough
*/

/* Skip link */
.skip-link {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 0.75em 1.25em;
	position: absolute;
	left: 1em;
	top: -100px;
	z-index: 100000;
	transition: top 0.2s ease;
	text-decoration: none;
	border-radius: 2px;
}

.skip-link:focus {
	top: 1em;
}

@media (prefers-reduced-motion: reduce) {
	.skip-link {
		transition: none;
	}
}

/* Visible keyboard focus everywhere, beyond theme.json element outlines */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/*
 * Pill buttons: solid accent primary + white/hairline-border secondary
 * (core's button block already gets border-radius:999px from theme.json;
 * this adds the hover-lift shadow and the outline-style secondary pill).
 */
.wp-block-button__link {
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	box-shadow: 0 10px 30px -10px rgba(109, 40, 217, 0.5);
	transform: translateY(-1px);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid rgba(6, 27, 49, 0.1);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 10px 30px -10px rgba(109, 40, 217, 0.35);
}

/* On dark bands (contrast/neutral background), an outline pill needs a
   transparent-with-white-border treatment instead of the white-filled pill
   above, otherwise white button text (set on the block for the old dark
   cover hero) disappears against a white fill. */
.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-neutral-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--base);
	border-color: rgba(255, 255, 255, 0.4);
}

.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-neutral-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link {
		transition: none;
	}

	.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
		transform: none;
	}
}

/* Eyebrow pill badge, used above centered hero headlines */
.st-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent-soft);
	border-radius: 999px;
	padding: 0.5em 1.1em;
}

/* Cards: rounded corners + hairline border + soft shadow, per restyle spec */
.st-card {
	border-radius: 1rem;
	border: 1px solid rgba(6, 27, 49, 0.08);
	box-shadow: var(--wp--preset--shadow--card);
}

/* Existing content markup expresses "card" panels as bordered columns
   (use-case-cards pattern) or solid neutral-background columns (solutions
   grid); round both without editing the block markup itself. */
.wp-block-column[style*="border-color"],
.wp-block-column.has-neutral-background-color {
	border-radius: 1rem;
}

/* Card headings: avoid mid-word wraps at narrow column widths (was hyphenating
   "Automating repetitive administration" at 1440px); prefer whole-word
   wrapping with balanced line lengths where supported. */
.wp-block-column .wp-block-heading,
.st-card .wp-block-heading {
	overflow-wrap: normal;
	word-break: normal;
	text-wrap: balance;
}

/*
 * Signature motif: the "step function" rule.
 * A stair-step gradient standing in for an ascending step graph —
 * literal to "StepThrough" and to the step-by-step method.
 * Used sparingly: header underline, hero divider, process numerals.
 */
.st-step-rule {
	height: 6px;
	width: 100%;
	background-image: linear-gradient(
		to right,
		var(--wp--preset--color--accent-soft) 0 12.5%,
		var(--wp--preset--color--accent) 12.5% 25%,
		var(--wp--preset--color--accent-soft) 25% 37.5%,
		var(--wp--preset--color--accent) 37.5% 50%,
		var(--wp--preset--color--accent-soft) 50% 62.5%,
		var(--wp--preset--color--accent) 62.5% 75%,
		var(--wp--preset--color--accent-soft) 75% 87.5%,
		var(--wp--preset--color--accent) 87.5% 100%
	);
}

.st-step-divider {
	position: relative;
	height: 28px;
	overflow: hidden;
}

.st-step-divider::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to bottom, var(--wp--preset--color--accent-soft) 50%, transparent 50%),
		linear-gradient(to bottom, var(--wp--preset--color--accent-soft) 50%, transparent 50%);
	background-size: 56px 56px;
	background-position: 0 0, 28px -28px;
	clip-path: polygon(
		0 100%, 0 75%, 12.5% 75%, 12.5% 50%, 25% 50%, 25% 25%,
		37.5% 25%, 37.5% 0, 62.5% 0, 62.5% 25%, 75% 25%, 75% 50%,
		87.5% 50%, 87.5% 75%, 100% 75%, 100% 100%
	);
}

/* Ascending step-blocks used by the how-it-works pattern in place of numbered circles */
.st-step-block {
	display: inline-flex;
	align-items: flex-end;
	gap: 3px;
	height: 1.1em;
	margin-inline-end: 0.6em;
	vertical-align: middle;
}

.st-step-block span {
	display: block;
	width: 5px;
	background-color: var(--wp--preset--color--accent);
	border-radius: 1px;
}

.st-step-block[data-step="1"] span:nth-child(1) { height: 25%; }
.st-step-block[data-step="1"] span:nth-child(2),
.st-step-block[data-step="1"] span:nth-child(3),
.st-step-block[data-step="1"] span:nth-child(4) { height: 25%; background-color: var(--wp--preset--color--accent-soft); }

.st-step-block[data-step="2"] span:nth-child(1) { height: 25%; }
.st-step-block[data-step="2"] span:nth-child(2) { height: 55%; }
.st-step-block[data-step="2"] span:nth-child(3),
.st-step-block[data-step="2"] span:nth-child(4) { height: 55%; background-color: var(--wp--preset--color--accent-soft); }

.st-step-block[data-step="3"] span:nth-child(1) { height: 25%; }
.st-step-block[data-step="3"] span:nth-child(2) { height: 55%; }
.st-step-block[data-step="3"] span:nth-child(3) { height: 80%; }
.st-step-block[data-step="3"] span:nth-child(4) { height: 80%; background-color: var(--wp--preset--color--accent-soft); }

.st-step-block[data-step="4"] span:nth-child(1) { height: 25%; }
.st-step-block[data-step="4"] span:nth-child(2) { height: 55%; }
.st-step-block[data-step="4"] span:nth-child(3) { height: 80%; }
.st-step-block[data-step="4"] span:nth-child(4) { height: 100%; }

/* Contact form (rendered by stepthrough-forms plugin shortcode) */
.st-form {
	max-width: 42rem;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.st-form .st-field {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.st-form label {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

.st-form .st-required {
	color: var(--wp--preset--color--accent);
}

.st-form input[type="text"],
.st-form input[type="email"],
.st-form textarea {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: 2px;
	padding: 0.75em 0.9em;
}

.st-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.st-form button[type="submit"] {
	align-self: flex-start;
}

/* Honeypot field: hidden from sighted users and hidden from screen readers via the plugin's aria-hidden + tabindex, this just removes it visually */
.st-form .st-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.st-form-status {
	padding: 0.9em 1.1em;
	border-radius: 2px;
	font-size: var(--wp--preset--font-size--small);
}

.st-form-status.is-success {
	background-color: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--accent);
}

.st-form-status.is-error {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
}

/* Mobile navigation overflow (core Navigation block responsive behaviour is preserved; this only styles the toggle/menu it renders) */
.wp-block-navigation .wp-block-navigation__responsive-container-open {
	background: none;
	border: none;
}

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