/*
 * Small finishing touches that theme.json cannot express. Everything here uses theme.json presets, so it follows
 * the colors and fonts chosen in the Site Editor.
 */

/* Short label above a heading. */
.ust-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.wp-block-cover .ust-eyebrow,
.is-style-section-dark .ust-eyebrow,
.is-style-section-accent .ust-eyebrow {
	color: inherit;
	opacity: 0.85;
}

/* Text on a dark photo stays light, whatever color headings are elsewhere. */
.wp-block-cover:not(.is-light) :is(h1, h2, h3, h4, h5, h6, p) {
	color: inherit;
}

.wp-block-cover:not(.is-light) .wp-block-button.is-style-outline > .wp-block-button__link {
	color: #fff;
}

/* Check-mark list. */
.ust-checklist {
	list-style: none;
	padding-left: 0;
}

.ust-checklist li {
	position: relative;
	padding-left: 1.9em;
	margin-bottom: 0.6em;
}

.ust-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.15em;
	height: 1.15em;
	border-radius: 50%;
	background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m5 10.5 3.2 3L15 7'/%3E%3C/svg%3E") center / 75% no-repeat;
}

/* Big numbers. */
.ust-stat-number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1;
	margin-bottom: 0.2em;
}

.ust-stats .wp-block-column + .wp-block-column {
	border-left: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	padding-left: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	.ust-stats .wp-block-column + .wp-block-column {
		border-left: 0;
		padding-left: 0;
	}
}

.ust-stars {
	color: var(--wp--preset--color--accent-3);
	letter-spacing: 0.15em;
	margin-bottom: 0.4em;
}

/* Header: sticky. On phones the call-to-action button gives way (the page has its own buttons right below), and a
   long business name shrinks and wraps instead of pushing the menu off the screen. */
.wp-site-blocks > .wp-block-template-part:has(> .ust-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}

.ust-header {
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

body.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .ust-header) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.ust-header .wp-block-buttons.ust-header-cta {
		display: none;
	}

	.ust-header .wp-block-site-title {
		font-size: clamp(1rem, 4.6vw, 1.25rem);
		line-height: 1.2;
	}
}

.ust-header .alignwide > .wp-block-group:first-child {
	min-width: 0;
	flex-shrink: 1;
}

.ust-header .wp-block-site-title {
	overflow-wrap: break-word;
}

.ust-header .wp-block-site-logo {
	flex-shrink: 0;
}

.wp-block-button__link {
	white-space: nowrap;
}

/* Footer. */
.ust-footer-heading {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.75;
}

.ust-footer {
	border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.ust-footer a {
	text-decoration: none;
}

.ust-footer a:hover {
	text-decoration: underline;
}

.ust-footer-rule {
	opacity: 0.25;
}

.ust-credit {
	opacity: 0.8;
}

/* Business hours block. */
.ust-hours {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35em 1.5em;
}

.ust-hours dt {
	font-weight: 600;
}

.ust-hours dd {
	margin: 0;
}

/* Menu / price list. */
.ust-price-row {
	border-bottom: 1px dashed var(--wp--preset--color--border);
	padding-bottom: 0.4em;
}

.ust-price {
	font-weight: 600;
	white-space: nowrap;
	color: var(--wp--preset--color--accent);
}

/* Accordions. */
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
}

.wp-block-details summary::marker {
	color: var(--wp--preset--color--accent);
}

/* Respect people who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
	}
}

/* Footer sits flush against the last section of the page. */
.wp-site-blocks > footer.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part:last-child {
	margin-block-start: 0;
}

/* Compact hours (footer): one tidy line per row. */
.ust-hours-wrap.is-compact,
.is-compact .ust-hours {
	font-size: var(--wp--preset--font-size--small);
}

.is-compact .ust-hours dt,
.is-compact .ust-hours dd {
	white-space: nowrap;
}

.is-compact .ust-hours {
	column-gap: 1em;
}

.is-compact .ust-hours-note {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.8;
}

/* Info bar above the header. */
.ust-infobar p {
	margin: 0;
}

.ust-infobar a {
	text-decoration: none;
}

@media (max-width: 600px) {
	.ust-infobar .alignwide > :last-child {
		display: none;
	}
}

/* Centered header: the menu sits under the logo. */
.ust-header--centered .wp-block-site-title {
	text-align: center;
}