/*
 * 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; }
}
/* Laptop/tablet top bar, measured for Crossroads (longest status "Opens tomorrow at 10 am"):
   all four items need ~1187px; without socials ~1071px. Socials stay in the footer. */
@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; }
}