/*
 * Shared polish for the Utah placeholder sites. Colors and type come from tokens.css,
 * so this file is identical across the three practices.
 */

html { scroll-padding-top: 96px; }

/* Headline weight is a brand token (base.css hardcodes 400). */
h1, h2, h3, .vgs-display, .vgs-card__title, .vgs-answer__q, .vgs-faq__item > summary { font-weight: var(--fw-display, 400); }

/* Header: logo + call pill (menu item with the CSS class vgs-nav-call) */
.vgs-header__brand .custom-logo-link { display: inline-flex; align-items: center; }
.vgs-header__brand .custom-logo { height: 52px; width: auto; }
.vgs-nav__list { align-items: center; }
.vgs-nav__list .vgs-nav-call > a {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
	padding: 0.5rem 1.125rem; border-radius: var(--radius-pill);
	background: var(--color-brand-primary); color: var(--color-text-inverse); font-weight: 600;
}
.vgs-nav__list .vgs-nav-call > a:hover,
.vgs-nav__list .vgs-nav-call > a:focus-visible { background: var(--color-brand-primary-hover); color: var(--color-text-inverse); }
@media (max-width: 800px) {
	.vgs-header__brand .custom-logo { height: 40px; }
	.vgs-nav__list .vgs-nav-call > a { width: 100%; }
}

/* Buttons */
.vgs-btn { border-radius: var(--radius-pill); }

/* Hero */
.vgs-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--color-bg-page) 0%, var(--color-bg-subtle) 100%); }
.vgs-hero::after {
	content: ""; position: absolute; right: -14vw; top: -20vw; width: 48vw; height: 48vw;
	max-width: 680px; max-height: 680px; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--color-brand-decor) 34%, transparent), transparent 70%);
}
.vgs-hero .container { position: relative; z-index: 1; }
.vgs-hero__body { max-width: 46rem; }
.vgs-hero .vgs-tagline { font-size: 1.1875rem; max-width: 40rem; color: var(--color-text-secondary); }

/* Trust chips */
.vgs-trust__row { gap: var(--space-md) var(--space-xl); }
.vgs-trust__item--text p {
	display: inline-flex; align-items: center; gap: 0.5rem; max-width: none;
	color: var(--color-text-primary); font-weight: 500;
}
.vgs-trust__item--text p::before {
	content: ""; flex: none; width: 1.125rem; height: 1.125rem; border-radius: 50%;
	background: var(--color-brand-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

/* Service cards */
.vgs-card { border-radius: var(--radius-lg); border-top: 4px solid var(--color-brand-decor); background: var(--color-bg-surface); }
.vgs-card__title { font-size: 1.3125rem; }

/* Answer block as a card, keeping the mobile gutter */
.vgs-answer .container {
	width: auto;
	margin-inline: max(var(--container-pad), calc((100% - var(--container-narrow)) / 2));
	padding: var(--space-xl) clamp(1.25rem, 3vw, 2.5rem);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-left: 4px solid var(--color-brand-primary);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}
.vgs-answer__bullets { margin-bottom: 0; }

/* Location */
.vgs-location__address strong { font-family: var(--font-display); font-size: 1.375rem; font-weight: var(--fw-display, 400); }
.vgs-location__address a:not(.vgs-btn) { color: var(--color-brand-primary); font-weight: 600; }
.vgs-location__hours {
	background: var(--color-bg-surface); border: 1px solid var(--color-border-default);
	border-radius: var(--radius-lg); padding: var(--space-xl);
}
.vgs-hours__row:last-child { border-bottom: 0; }
.vgs-hours__row dd, .vgs-location__address a[href^="tel:"] { font-variant-numeric: tabular-nums; }

/* Closing CTA band */
.vgs-cta { text-align: center; }
.vgs-cta .vgs-cta-row { justify-content: center; }
.vgs-ground-inverse .vgs-btn--primary { background: var(--color-text-inverse); color: var(--color-bg-inverse); }
.vgs-ground-inverse .vgs-btn--primary:hover,
.vgs-ground-inverse .vgs-btn--primary:focus-visible { background: var(--color-bg-subtle); color: var(--color-bg-inverse); }
.vgs-ground-inverse :focus-visible { outline-color: var(--color-text-inverse); }

/* Footer sits flush under the CTA band */
.vgs-footer { margin-top: 0; }

/* Six service cards: 3 x 2 on desktop, 2 x 3 on tablet, stacked on phones */
.vgs-services .vgs-grid--cards { grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 640px) { .vgs-services .vgs-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .vgs-services .vgs-grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vgs-card__summary:last-child { margin-bottom: 0; }

/* Phones: left-aligned highlight chips and less vertical air */
@media (max-width: 640px) {
	.vgs-trust__row { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-sm); }
	.vgs-pad-xl { padding-block: var(--space-3xl); }
	.vgs-pad-lg { padding-block: var(--space-2xl); }
	.vgs-pad-md { padding-block: var(--space-xl); }
}


/* Utility bar: address, live open/closed status, Google rating pill, social icons */
.vgs-topbar { background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border-default); font-size: 0.9375rem; }
.vgs-topbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); min-height: 60px; padding-block: 0.375rem; }
.vgs-topbar a { text-decoration: none; color: var(--color-text-primary); }
.vgs-topbar__addr { display: inline-flex; align-items: center; gap: 0.375rem; margin-right: auto; min-height: 44px; color: var(--color-text-secondary); }
.vgs-topbar__addr svg { color: var(--color-brand-primary); flex: none; }
.vgs-topbar__addr:hover span, .vgs-topbar__addr:focus-visible span { text-decoration: underline; }
.vgs-status { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-weight: 600; }
.vgs-status__dot { width: 0.75rem; height: 0.75rem; flex: none; border-radius: 50%; background: #9AA4AE; box-shadow: 0 0 0 2px var(--color-bg-surface); }
.vgs-status.is-open .vgs-status__dot { background: #22A04B; }
.vgs-status__sep { color: var(--color-text-secondary); font-weight: 400; }
.vgs-status__detail { font-weight: 500; }
.vgs-status:hover .vgs-status__detail { text-decoration: underline; }
.vgs-gpill {
	display: inline-flex; align-items: center; gap: 0.625rem; min-height: 44px;
	padding: 0.375rem 1rem 0.375rem 0.75rem; background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default); border-radius: var(--radius-pill);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.vgs-gpill:hover, .vgs-gpill:focus-visible { border-color: var(--color-border-strong); box-shadow: var(--shadow-card); }
.vgs-gpill svg { flex: none; }
.vgs-stars { position: relative; display: inline-block; flex: none; width: 90px; height: 18px; line-height: 0; }
.vgs-stars svg { max-width: none; width: 90px; height: 18px; }
.vgs-stars__base svg { fill: #D6D9DE; }
.vgs-stars__fill { position: absolute; top: 0; left: 0; bottom: 0; width: var(--pct, 100%); overflow: hidden; }
.vgs-stars__fill svg { fill: #F4B400; }
.vgs-gpill__text { white-space: nowrap; color: var(--color-text-primary); }
.vgs-gpill__text strong { font-weight: 700; }
.vgs-gpill__text--short { display: none; }
.vgs-social { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.vgs-social li { margin: 0; }
.vgs-social__link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--color-brand-primary); }
.vgs-social__link:hover, .vgs-social__link:focus-visible { background: var(--color-bg-surface); }
.vgs-social--footer { margin-top: var(--space-md); gap: var(--space-xs); }
.vgs-social--footer .vgs-social__link { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); }
@media (max-width: 860px) {
	.vgs-topbar { font-size: 0.875rem; }
	.vgs-topbar__addr, .vgs-social--topbar { display: none; }
	.vgs-topbar__inner { justify-content: space-between; min-height: 0; }
}
/* Laptops and tablets: drop the social icons (also in the footer) below 1200px and the address below 1100px
   so the status and rating pill stay on one line. Boulder's address and status text are longer than
   Skyridge's (which uses 1099/1023): the full row needs about 1094px, and 978px without the icons. */
@media (max-width: 1199px) {
	.vgs-social--topbar { display: none; }
}
@media (max-width: 1099px) {
	.vgs-topbar__addr { display: none; }
	.vgs-topbar__inner { justify-content: space-between; }
}
@media (max-width: 480px) {
	.vgs-topbar { font-size: 0.8125rem; }
	.vgs-topbar__inner { flex-wrap: nowrap; gap: var(--space-xs); }
	.vgs-status { gap: 0.375rem; white-space: nowrap; min-width: 0; }
	.vgs-gpill { gap: 0.375rem; padding-inline: 0.5rem 0.75rem; }
	.vgs-gpill > svg { width: 18px; height: 18px; }
	.vgs-stars, .vgs-gpill__text--long { display: none; }
	.vgs-gpill__text--short { display: inline; }
	.vgs-gpill__text--short::before { content: "\2605"; color: #F4B400; margin-right: 0.25rem; }
}
@media (max-width: 400px) {
	.vgs-gpill__count { display: none; }
}

/* Narrow phones: put the open/closed detail on its own line so it never runs under the rating pill. */
@media (max-width: 420px) {
	.vgs-status { flex-wrap: wrap; row-gap: 0; white-space: normal; line-height: 1.25; padding-block: 0.25rem; }
	.vgs-status__sep { display: none; }
	.vgs-status__detail { flex-basis: 100%; padding-left: calc(0.75rem + 0.375rem); }
}

/* Tablet widths: the five-item menu needs about 940px, but vgs-base only collapses at 800px.
   Collapse up to 1023px (same rules as base's mobile menu) and tighten spacing up to 1199px. */
.vgs-header__brand { flex: none; }
.vgs-nav__list a { white-space: nowrap; }
@media (min-width: 801px) and (max-width: 1023px) {
	.vgs-nav-toggle { display: inline-flex; }
	.vgs-nav {
		position: absolute; inset: 100% 0 auto 0; background: var(--color-bg-page);
		border-bottom: 1px solid var(--color-border-default); max-height: 0; overflow: hidden;
		transition: max-height var(--dur-2) var(--ease);
	}
	.vgs-nav.is-open { max-height: 80vh; }
	.vgs-nav__list { flex-direction: column; align-items: stretch; padding: var(--space-lg) var(--container-pad); gap: var(--space-sm); }
	.vgs-nav__list .vgs-nav-call > a { width: 100%; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
	.vgs-nav__list { gap: 1rem; }
}