/*
 * Ascendly engine styles.
 *
 * Only what theme.json cannot express. Everything here is either an
 * accessibility guarantee, a pattern helper, or a form control.
 *
 * No colors are hardcoded. Every value reads a theme.json token, so a child
 * theme changes the look by changing tokens and never by overriding this file.
 * If you are tempted to add a client-specific rule here, it belongs in the
 * child's theme.json instead.
 */

/* ---------------------------------------------------------------------------
   Accessibility guarantees
   These must survive plugin resets, so they are deliberately specific.
--------------------------------------------------------------------------- */

.ascendly-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--wp--custom--radius--button) 0;
}

.ascendly-skip-link:focus {
	left: 0;
	outline: 3px solid var(--wp--preset--color--accent-bright);
	outline-offset: 2px;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Visible focus on every interactive element. Never remove without replacing. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* The skip-link target takes focus programmatically and should not show a ring. */
#ascendly-main:focus {
	outline: none;
}

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

/* ---------------------------------------------------------------------------
   Forms
--------------------------------------------------------------------------- */

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

.ascendly-form__row {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.ascendly-form__row label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.ascendly-form input[type="text"],
.ascendly-form input[type="tel"],
.ascendly-form input[type="email"],
.ascendly-form select,
.ascendly-form textarea {
	width: 100%;
	padding: 0.75rem 0.875rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--button);
	transition: border-color 0.15s ease;
}

.ascendly-form input:hover,
.ascendly-form select:hover,
.ascendly-form textarea:hover {
	border-color: var(--wp--preset--color--muted);
}

.ascendly-form textarea {
	resize: vertical;
	min-height: 7rem;
}

.ascendly-form__actions {
	margin: var(--wp--preset--spacing--30) 0 0;
}

.ascendly-form__status {
	padding: 0.875rem 1rem;
	margin: 0 0 var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--button);
	border-left: 3px solid;
	font-size: var(--wp--preset--font-size--small);
}

.ascendly-form__status--ok {
	background: var(--wp--preset--color--surface);
	border-left-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

.ascendly-form__status--err {
	background: var(--wp--preset--color--surface);
	border-left-color: #b32d2e;
	color: var(--wp--preset--color--ink);
}

/* Forms sitting on a dark band invert their labels. */
.has-dark-background-color .ascendly-form__row label,
.ascendly-band--dark .ascendly-form__row label {
	color: var(--wp--preset--color--dark-ink);
}

/* ---------------------------------------------------------------------------
   Booking
--------------------------------------------------------------------------- */

.ascendly-booking-embed {
	width: 100%;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}

.ascendly-notice {
	padding: 1rem;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------------------------------------------------------------------------
   Pattern helpers
   Used by the variant library. Each is a behavior, not a look. The look comes
   from tokens, which is why the same helper reads differently per archetype.
--------------------------------------------------------------------------- */

/* Cards that lift on hover. Suppressed under reduced motion by the rule above. */
.ascendly-card {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ascendly-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--lift);
}

/* Eyebrow label above a heading. */
.ascendly-eyebrow {
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.5rem;
}

.ascendly-band--dark .ascendly-eyebrow,
.has-dark-background-color .ascendly-eyebrow {
	color: var(--wp--preset--color--accent-bright);
}

/* Oversized numeral for stat bands and numbered process steps. */
.ascendly-numeral {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--accent);
}

.ascendly-band--dark .ascendly-numeral,
.has-dark-background-color .ascendly-numeral {
	color: var(--wp--preset--color--accent-bright);
}

/* Icon tile. Houses a line icon at a consistent size across archetypes. */
.ascendly-icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--button);
	background: color-mix(in srgb, var(--wp--preset--color--accent-bright) 12%, transparent);
	color: var(--wp--preset--color--accent);
	margin-bottom: var(--wp--preset--spacing--20);
}

.ascendly-icon-tile svg {
	width: 22px;
	height: 22px;
	stroke-width: 1.8;
}

/* City link grid for service area patterns. */
.ascendly-city-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 0.5rem 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ascendly-city-grid li {
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
}

/* These are standalone links in a list, not links inside a sentence, so the
   target-size rule applies to them. Make the whole row tappable rather than
   just the text, and give it a real height on touch. */
.ascendly-city-grid a {
	display: block;
	padding: 0.6rem 0;
	text-decoration: none;
}

.ascendly-city-grid a:hover {
	text-decoration: underline;
}

/* A link that is the entire content of its paragraph is a standalone target,
   not a link inside a sentence. This is the shape card footers and text CTAs
   take ("Panel upgrades", "Read all reviews on Google"), and it is the case
   the guidelines mean when they talk about target size.

   24px is the WCAG 2.2 AA floor and applies everywhere. 44px applies on touch,
   where it actually matters. Links genuinely inside a sentence match neither
   selector and keep their natural size, which is correct. */
p > a:only-child {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

@media (pointer: coarse) {
	p > a:only-child {
		min-height: 44px;
	}
}

/* A standalone phone link is the primary conversion on most of these builds,
   so it gets size as well as height. */
p > .ascendly-call:only-child,
.ascendly-call.is-standalone {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	text-decoration: none;
}

p > .ascendly-call:only-child:hover,
.ascendly-call.is-standalone:hover {
	text-decoration: underline;
}

@media (pointer: coarse) {
	.ascendly-city-grid a {
		padding: 0.85rem 0;
	}
}

/* Rule used as a section marker in the editorial archetype. */
.ascendly-rule {
	width: 56px;
	height: 3px;
	background: var(--wp--preset--color--accent);
	border: 0;
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* Sticky mobile call bar. The single highest-converting element on a local
   service site, and the one clients most often forget to ask for. */
.ascendly-callbar {
	display: none;
}

@media (max-width: 780px) {
	.ascendly-callbar {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 90;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1px;
		background: var(--wp--preset--color--line);
		box-shadow: 0 -2px 16px rgba(16, 24, 40, 0.12);
	}

	.ascendly-callbar a {
		padding: 0.9rem 0.5rem;
		text-align: center;
		font-weight: 600;
		font-size: var(--wp--preset--font-size--small);
		text-decoration: none;
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--ink);
	}

	.ascendly-callbar a.is-primary {
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--accent-ink);
	}

	body {
		padding-bottom: 3.5rem;
	}
}

/* ---------------------------------------------------------------------------
   Print
   Local businesses print their own service pages more often than you expect.
--------------------------------------------------------------------------- */

@media print {
	.ascendly-skip-link,
	.ascendly-callbar,
	.wp-block-navigation,
	.ascendly-booking-embed {
		display: none !important;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		word-break: break-all;
	}
}