/**
 * trulytype UI polish — activated from make-interfaces-feel-better
 * https://github.com/jakubkrehel/make-interfaces-feel-better
 */

:root {
	--tt-shadow-border:
		0 0 0 1px rgba(0, 0, 0, 0.06),
		0 1px 2px -1px rgba(0, 0, 0, 0.06),
		0 2px 4px 0 rgba(0, 0, 0, 0.04);
	--tt-shadow-border-hover:
		0 0 0 1px rgba(0, 0, 0, 0.08),
		0 1px 2px -1px rgba(0, 0, 0, 0.08),
		0 2px 4px 0 rgba(0, 0, 0, 0.06);
	--tt-ease-out: cubic-bezier(0.2, 0, 0, 1);
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
.browse-header h1,
.fonts-in-use-header h1,
.hero-card-title,
.char-title {
	text-wrap: balance;
}

p,
.try-fonts-intro,
.step-header p,
.contact-newsletter__copy,
.font-family-description p {
	text-wrap: pretty;
}

.tabular-nums,
.cart-count,
.checkout-cart-item-price,
.checkout-subtotal span,
.font-product-price,
[data-usd-price] {
	font-variant-numeric: tabular-nums;
}

/* Buttons — scale on press, specific transitions, subtle depth */
.nav-links a,
.nav-browse-trigger,
.nav-links .cart-widget-link,
.mobile-nav-btn,
.font-specimen-license-cta {
	transition-property: transform, box-shadow, background-color, color, opacity, border-color;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
}

/* Buttons — scale on press, specific transitions, subtle depth */
.btn,
.btn-primary,
.btn-secondary,
.btn-pay,
.step-btn,
.batch-btn,
.download-btn,
.morphing-element,
.contact-newsletter__form button,
.trulytype-exit-intent__form button,
.edd_checkout_form .edd-submit,
button.edd-submit,
input.edd-submit,
#edd_checkout_wrap .edd-submit,
.hero-card-actions .btn,
.module-actions .btn,
.font-hero .btn {
	transition-property: transform, box-shadow, background-color, color, opacity, border-color;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
}

@media (prefers-reduced-motion: no-preference) {
	.btn:active:not(:disabled),
	.btn-primary:active:not(:disabled),
	.btn-secondary:active:not(:disabled),
	.btn-pay:active:not(:disabled),
	.step-btn:active:not(:disabled),
	.batch-btn:active:not(:disabled),
	.download-btn:active:not(:disabled),
	.morphing-element:active:not(.disabled),
	.contact-newsletter__form button:active:not(:disabled),
	.trulytype-exit-intent__form button:active:not(:disabled),
	.edd_checkout_form .edd-submit:active:not(:disabled),
	button.edd-submit:active:not(:disabled),
	input.edd-submit:active:not(:disabled),
	#edd_checkout_wrap .edd-submit:active:not(:disabled),
	.hero-card-actions .btn:active:not(:disabled),
	.module-actions .btn:active:not(:disabled),
	.font-hero .btn:active:not(:disabled),
	.nav-links .cart-widget-link:active,
	.mobile-nav-btn:active,
	.font-specimen-license-cta:active {
		transform: scale(0.96);
	}
}

/* Secondary buttons — shadow depth on hover */
.btn-secondary {
	box-shadow: var(--tt-shadow-border);
}

.btn-secondary:hover:not(:disabled) {
	box-shadow: var(--tt-shadow-border-hover);
}

/* Specimen + module images */
.fullscreen-image,
.font-module img:not(.hero-afrika-image),
.slideshow-img,
.project-module img {
	outline: 1px solid rgba(0, 0, 0, 0.1);
	outline-offset: -1px;
}

/* Small controls — minimum hit area */
.try-fonts-poster__subscribe input[type="checkbox"],
.font-checkbox,
.license-checkbox {
	position: relative;
}

.try-fonts-poster__subscribe input[type="checkbox"]::after,
.font-checkbox::after,
.license-checkbox::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	transform: translate(-50%, -50%);
}