/* Thrive-O base: element defaults, utilities and block style variations. Mobile first: 640 / 900 / 1280. */

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

html {
	scroll-padding-top: calc(var(--thriveo-header-height) + var(--thriveo-space-4));
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.wp-site-blocks {
	overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

a {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--thriveo-duration-fast) var(--thriveo-ease-out);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--thriveo-color-focus);
	outline-offset: 3px;
	border-radius: var(--thriveo-radius-xs);
}

::selection {
	background: var(--thriveo-color-cta);
	color: var(--thriveo-color-cta-text);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

strong,
b {
	font-weight: 600;
}

hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--thriveo-color-hairline);
}

table,
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--thriveo-color-hairline);
	padding: var(--thriveo-space-2) var(--thriveo-space-3);
	vertical-align: top;
}

.wp-block-table thead th {
	background: var(--thriveo-color-surface);
	font-weight: 600;
	text-align: left;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
	background: var(--thriveo-color-surface);
	border: 1px solid var(--thriveo-color-border);
	border-radius: var(--thriveo-radius-sm);
	color: var(--thriveo-color-text);
	font: inherit;
	padding: var(--thriveo-space-2) var(--thriveo-space-3);
}

input::placeholder,
textarea::placeholder {
	color: var(--thriveo-color-muted);
}

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

.skip-link:focus {
	background: var(--thriveo-color-surface);
	color: var(--thriveo-color-text);
	z-index: 1000;
}

.eyebrow,
.thriveo-eyebrow {
	color: var(--thriveo-color-link);
	font-family: var(--thriveo-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow, 0.16em);
	line-height: 1.4;
	margin-bottom: var(--thriveo-space-4);
	text-transform: uppercase;
}

.eyebrow::before,
.thriveo-eyebrow::before {
	content: "// ";
}

.thriveo-lede {
	color: var(--thriveo-color-text-secondary);
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.6;
	max-width: 60ch;
}

.thriveo-muted,
.thriveo-legal-ref {
	color: var(--thriveo-color-muted);
}

.thriveo-legal-ref {
	font-style: italic;
}

.thriveo-legal-meta {
	color: var(--thriveo-color-link);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* Buttons */
.wp-block-button__link {
	transition: background-color var(--thriveo-duration-base) var(--thriveo-ease-out),
		border-color var(--thriveo-duration-base) var(--thriveo-ease-out),
		color var(--thriveo-duration-base) var(--thriveo-ease-out);
}

.wp-block-button__link:active {
	background-color: var(--thriveo-color-cta-press);
}

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--thriveo-color-border);
	color: var(--thriveo-color-text);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus-visible {
	background: var(--thriveo-color-surface-tint);
	border-color: var(--thriveo-color-text);
	color: var(--thriveo-color-text);
}

.wp-block-button.is-style-outline-cyan .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--thriveo-color-link);
	color: var(--thriveo-color-link);
}

.wp-block-button.is-style-outline-cyan .wp-block-button__link:hover,
.wp-block-button.is-style-outline-cyan .wp-block-button__link:focus-visible {
	background: var(--thriveo-color-cta);
	border-color: var(--thriveo-color-cta);
	color: var(--thriveo-color-cta-text);
}

/* Group style variations */
.wp-block-group.is-style-card {
	background: var(--thriveo-color-surface);
	border: 1px solid var(--thriveo-color-hairline);
	border-radius: var(--thriveo-radius-lg);
	box-shadow: var(--thriveo-shadow-sm);
	padding: var(--thriveo-space-6);
	transition: box-shadow var(--thriveo-duration-base) var(--thriveo-ease-out),
		border-color var(--thriveo-duration-base) var(--thriveo-ease-out);
}

.wp-block-group.is-style-card:hover {
	border-color: var(--thriveo-color-accent-line);
	box-shadow: var(--thriveo-shadow-md);
}

.wp-block-group.is-style-service-card {
	background: var(--thriveo-color-surface);
	border: 1px solid var(--thriveo-color-hairline);
	border-radius: var(--thriveo-radius-lg);
	box-shadow: var(--thriveo-shadow-sm);
	display: flex;
	flex-direction: column;
	gap: var(--thriveo-space-3);
	height: 100%;
	padding: var(--thriveo-space-6);
	position: relative;
	transition: box-shadow var(--thriveo-duration-base) var(--thriveo-ease-out),
		border-color var(--thriveo-duration-base) var(--thriveo-ease-out);
}

.wp-block-group.is-style-service-card::before {
	background: var(--thriveo-color-cta);
	border-radius: 50%;
	content: "";
	display: block;
	height: 10px;
	width: 10px;
}

.wp-block-group.is-style-service-card:hover {
	border-color: var(--thriveo-color-accent-line);
	box-shadow: var(--thriveo-shadow-md);
}

.wp-block-group.is-style-service-card > :last-child {
	margin-top: auto;
}

.wp-block-group.is-style-accent-left {
	border-top: 1px solid var(--thriveo-color-hairline);
	padding-top: var(--thriveo-space-4);
}

.wp-block-group.is-style-dot-grid {
	background-image: var(--thriveo-dot-grid);
	background-size: 32px 32px;
}

.wp-block-separator.is-style-glow {
	background: var(--thriveo-glow-line);
	border: 0;
	height: 1px;
	opacity: 1;
}

@media (min-width: 900px) {
	.wp-block-group.is-style-card,
	.wp-block-group.is-style-service-card {
		padding: var(--thriveo-space-8);
	}
}

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