/* =========================================================
   Vigo Classic — front page sections (1:1 with approved Figma)
   ========================================================= */

/* ---------- Hero ---------- */
.vc-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	min-height: clamp(420px, 60vw, 560px);
}
.vc-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The courthouse photo is portrait (3:4) in a 2.6:1 band, so `cover` throws
	   away most of its height. 12% keeps the moon, the lit cupola and the
	   balcony — the part that identifies the building — where the default
	   centre crop lands on blank dome and loses the moon entirely.
	   On phones the box is nearly as tall as it is wide, so almost the whole
	   frame survives and this anchor barely bites. */
	object-position: center 12%;
}
/* QA 2026-08-07: on desktop, lift the crop so the dome roof meets the seam
   under the menu banner instead of floating below it. Phones keep 12% —
   the box is tall there, nearly the whole frame shows, and 12% preserves
   the moon. */
@media (min-width: 900px) {
	/* 24% puts the cupola finial right at the seam under the menu banner
	   (cover math on the 1536×2048 source at a 1280×560 band: band top =
	   1376 × Y%, finial at source row ~337 → Y ≈ 24.5%). The moon's lower
	   half still glows around the cupola; its top edge is cropped — showing
	   the whole moon and the dome at the seam are mutually exclusive, and
	   the client asked for the dome. */
	.vc-hero__bg { object-position: center 24%; }
}
.vc-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(20, 33, 61, 0.88) 0%, rgba(20, 33, 61, 0.70) 100%);
}
.vc-hero__inner {
	position: relative;
	max-width: 1440px;
	margin-inline: auto;
	padding: 48px 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(420px, 60vw, 560px);
}
@media (min-width: 640px) {
	.vc-hero__inner { padding: 80px 32px; }
}
.vc-hero__content { max-width: 42rem; }
.vc-hero__eyebrow {
	margin-bottom: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* Over the photo, not over flat navy — see the token's note. */
	color: var(--vc-gold-on-photo);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
}
.vc-hero__eyebrow::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1.5px;
	background-color: var(--vc-gold);
}
.vc-hero__title {
	font-family: var(--vc-serif);
	color: var(--vc-cream);
	font-size: clamp(36px, 4vw, 54px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}
.vc-hero__lede {
	color: rgba(251, 251, 248, 0.8);
	font-size: 18px;
	line-height: 1.6;
	font-weight: 400;
	margin: 0 0 36px;
	max-width: 480px;
}
.vc-hero__form {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}
.vc-hero__search {
	position: relative;
	width: 100%;
}
@media (min-width: 640px) {
	.vc-hero__search { flex: 1; max-width: 24rem; }
}
.vc-hero__search input {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 48px 14px 20px;
	border-radius: 16px;
	font-size: 16px;
	font-family: var(--vc-sans);
	background-color: rgba(255, 255, 255, 0.97);
	color: var(--vc-navy);
	border: 1.5px solid rgba(255, 255, 255, 0.6);
}
.vc-hero__search input:focus {
	outline: 2px solid var(--vc-gold);
	outline-offset: 1px;
}
.vc-hero__search button {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--vc-gray);
	display: flex;
}
.vc-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 32px;
	border-radius: 9999px;
	background-color: var(--vc-gold);
	color: var(--vc-navy);
	font-family: var(--vc-sans);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
	text-decoration: none;
	transition: filter 0.15s;
}
.vc-hero__cta:hover { filter: brightness(1.1); }
.vc-hero__cta:focus-visible {
	outline: 2px solid var(--vc-gold);
	outline-offset: 2px;
}

/* Animated wave divider — pure CSS, v3 (QA follow-up 2026-08-12).
   Two layers, each a repeat-x SVG tile translated by EXACTLY one tile
   width (1440px): with a repeating background, position -1440px is
   pixel-identical to 0, so the loop can't blip. The layers run opposite
   directions at non-harmonic speeds (26s vs 19s), which reads as water
   flowing rather than a sheet sliding — the effect the Figma prototype
   had that its exported code lost. */
.vc-hero__wave {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	height: 90px;
	pointer-events: none;
}
.vc-hero__wave::before,
.vc-hero__wave::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 100%;
	width: calc(100% + 1440px);
	background-repeat: repeat-x;
	background-position: left bottom;
	background-size: 1440px 90px;
}
/* Back layer: the faint counter-current. */
.vc-hero__wave::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201440%2090%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M0,55%20C200,20%20400,75%20600,50%20C800,25%201000,70%201200,45%20C1320,30%201380,60%201440,55%20L1440,90%20L0,90%20Z%27%20fill=%27%23FBFBF8%27/%3E%3C/svg%3E");
	opacity: 0.5;
	animation: vc-wave-back 19s linear infinite;
}
/* Front layer: the solid shoreline. */
.vc-hero__wave::after {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201440%2090%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M0,40%20C180,80%20360,0%20540,40%20C720,80%20900,10%201080,45%20C1260,80%201350,20%201440,40%20L1440,90%20L0,90%20Z%27%20fill=%27%23FBFBF8%27/%3E%3C/svg%3E");
	animation: vc-wave-front 26s linear infinite;
}
@keyframes vc-wave-front {
	to { transform: translate3d(-1440px, 0, 0); }
}
@keyframes vc-wave-back {
	from { transform: translate3d(-1440px, 0, 0); }
	to { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.vc-hero__wave::before,
	.vc-hero__wave::after { animation: none; }
}

/* ---------- Services / Quick Access grid ---------- */
.vc-services {
	padding: 64px 0;
	background: linear-gradient(180deg, #FBFBF8 0%, #F0F0EC 100%);
}
.vc-services__head {
	margin-bottom: 40px;
	text-align: center;
}
.vc-eyebrow {
	color: var(--vc-gold-text);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 8px;
}
.vc-services__title {
	font-family: var(--vc-serif);
	color: var(--vc-navy);
	font-size: clamp(24px, 4vw, 34px);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 6px;
}
.vc-services__sub {
	color: var(--vc-gray);
	font-size: 16px;
	margin: 0;
}
.vc-services__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
@media (min-width: 640px) {
	.vc-services__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
	.vc-services__grid { grid-template-columns: repeat(5, 1fr); }
}
.vc-svc {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 20px 12px;
	border-radius: 16px;
	background-color: var(--vc-white);
	box-shadow: 0 1px 4px rgba(20, 33, 61, 0.06), 0 4px 16px rgba(20, 33, 61, 0.05);
	border: 1px solid rgba(20, 33, 61, 0.06);
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.15s;
}
@media (min-width: 640px) {
	.vc-svc { padding: 28px 20px; }
}
.vc-svc:hover { transform: translateY(-2px); box-shadow: var(--vc-shadow-card); }
.vc-svc:focus-visible { outline: 2px solid var(--vc-gold); outline-offset: 2px; }
.vc-svc__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	margin-bottom: 16px;
	background-color: var(--vc-surface);
	color: var(--vc-navy);
	transition: transform 0.15s, background-color 0.15s, color 0.15s;
}
.vc-svc:hover .vc-svc__icon {
	transform: scale(1.1);
	background-color: var(--vc-navy);
	color: var(--vc-gold);
}
.vc-svc__bar {
	width: 32px;
	height: 4px;
	border-radius: 9999px;
	margin-bottom: 12px;
	background-color: var(--vc-gold);
	transition: width 0.15s;
}
.vc-svc:hover .vc-svc__bar { width: 48px; }
.vc-svc__label {
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--vc-navy);
	font-size: 15px;
}
.vc-svc__desc {
	color: var(--vc-gray);
	font-size: 12px;
	line-height: 1.5;
}
.vc-services__foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
}
.vc-pill-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	border-radius: 9999px;
	border: 1px solid rgba(20, 33, 61, 0.2);
	color: var(--vc-navy);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.vc-pill-link:hover {
	background-color: var(--vc-navy);
	color: #fff;
	border-color: var(--vc-navy);
}
.vc-pill-link:focus-visible { outline: 2px solid var(--vc-gold); outline-offset: 2px; }

/* ---------- Calendar ---------- */
.vc-cal-wrap { background-color: var(--vc-white); padding: 48px 0; }
@media (min-width: 768px) { .vc-cal-wrap { padding: 64px 0; } }
.vc-cal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 20px;
	gap: 12px;
	flex-wrap: wrap;
}
.vc-cal__title {
	font-family: var(--vc-serif);
	color: var(--vc-navy);
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}
.vc-cal__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.vc-btn-navy {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 9999px;
	font-weight: 600;
	font-size: 14px;
	background-color: var(--vc-navy);
	color: var(--vc-cream);
	text-decoration: none;
	box-shadow: 0 2px 12px rgba(20, 33, 61, 0.2);
	transition: transform 0.15s;
}
.vc-btn-navy:hover { transform: scale(1.05); }
.vc-link-strong {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--vc-navy);
	text-decoration: none;
	transition: color 0.15s;
}
.vc-link-strong:hover { color: var(--vc-gold-text); }
.vc-cal__panes {
	display: flex;
	gap: 16px;
	flex-direction: column;
}
@media (min-width: 640px) {
	.vc-cal__panes { flex-direction: row; }
}
.vc-cal__next {
	border-radius: 16px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: var(--vc-navy);
	min-height: 200px;
}
@media (min-width: 640px) {
	.vc-cal__next { width: 28%; flex-shrink: 0; }
}
.vc-cal__next-label {
	color: var(--vc-gold);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.vc-cal__next-day {
	font-family: var(--vc-serif);
	color: var(--vc-cream);
	font-size: 56px;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 2px;
}
.vc-cal__next-month {
	color: var(--vc-gold);
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 16px;
}
.vc-cal__next-title {
	color: var(--vc-cream);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 12px;
}
.vc-cal__next-meta {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	color: rgba(251, 251, 248, 0.6);
	font-size: 12px;
	margin-bottom: 6px;
}
.vc-cal__next-meta .vc-i { color: var(--vc-gold); flex-shrink: 0; margin-top: 2px; }
.vc-cal__next-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--vc-gold);
	text-decoration: none;
}
.vc-cal__next-link:hover { opacity: 0.8; }

.vc-cal__list {
	flex: 1;
	min-width: 0;
	border-radius: 16px;
	overflow: hidden;
	background-color: var(--vc-white);
	border: 1px solid var(--vc-border);
	box-shadow: 0 2px 16px rgba(20, 33, 61, 0.06);
}
.vc-cal__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid rgba(20, 33, 61, 0.07);
}
.vc-cal__bar .vc-i-calendar { color: var(--vc-gold); }
.vc-cal__navbtn {
	width: 24px;
	height: 24px;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--vc-gray);
	transition: background-color 0.15s;
}
.vc-cal__navbtn:hover { background-color: var(--vc-surface); }
.vc-cal__month {
	color: var(--vc-navy);
	font-size: 14px;
	font-weight: 700;
	min-width: 100px;
	text-align: center;
}
.vc-cal__count {
	color: var(--vc-gray-light);
	font-size: 12px;
	margin-left: auto;
}
.vc-cal__filters { display: none; gap: 4px; }
@media (min-width: 640px) { .vc-cal__filters { display: flex; } }
.vc-cal__filter {
	padding: 4px 10px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--vc-gray-light);
	transition: background-color 0.15s, color 0.15s;
}
.vc-cal__filter[aria-pressed="true"] {
	background-color: var(--vc-navy);
	color: var(--vc-cream);
}
.vc-cal__closures-toggle {
	display: none;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
	background-color: rgba(139, 26, 26, 0.1);
	color: var(--vc-brick);
	border: 1px solid rgba(139, 26, 26, 0.2);
	cursor: pointer;
}
@media (min-width: 640px) { .vc-cal__closures-toggle { display: flex; } }

.vc-cal__closures-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background-color: rgba(139, 26, 26, 0.05);
	border-bottom: 1px solid rgba(139, 26, 26, 0.08);
}
.vc-cal__closures-dot {
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background-color: var(--vc-brick);
}
.vc-cal__closures-label {
	color: var(--vc-brick);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.vc-cal__row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(20, 33, 61, 0.06);
	text-decoration: none;
	transition: background-color 0.15s;
}
.vc-cal__row:last-child { border-bottom: 0; }
.vc-cal__row:hover { background-color: #FAFAF8; }
.vc-cal__row--closure { background-color: rgba(139, 26, 26, 0.02); }
.vc-cal__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 40px;
	text-align: center;
	padding-top: 2px;
}
.vc-cal__date-day {
	color: var(--vc-navy);
	font-size: 18px;
	font-weight: 800;
	font-family: var(--vc-serif);
	line-height: 1;
}
.vc-cal__date-mon {
	color: var(--vc-navy);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.vc-cal__body { flex: 1; min-width: 0; }
.vc-cal__ev-title {
	font-weight: 600;
	line-height: 1.35;
	color: var(--vc-navy);
	font-size: 13px;
	margin-bottom: 3px;
	transition: color 0.15s;
}
.vc-cal__row:hover .vc-cal__ev-title { color: var(--vc-gold-text); }
.vc-cal__ev-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	color: var(--vc-gray-light);
	font-size: 11px;
}
.vc-cal__ev-meta span { display: inline-flex; align-items: center; gap: 4px; }
.vc-cal__ev-sub {
	color: var(--vc-gray-light);
	font-size: 11px;
	margin-top: 2px;
}

/* ---------- News ---------- */
.vc-news-wrap { background-color: var(--vc-surface-warm); padding: 48px 0; }
@media (min-width: 768px) { .vc-news-wrap { padding: 64px 0; } }
.vc-news__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
}
.vc-news__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 12px;
}
.vc-news__title {
	font-family: var(--vc-serif);
	color: var(--vc-navy);
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}
.vc-news__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 640px) { .vc-news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vc-news__grid { grid-template-columns: repeat(4, 1fr); } }
.vc-newscard {
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	padding: 20px;
	background-color: var(--vc-white);
	border: 1px solid rgba(20, 33, 61, 0.07);
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.15s;
}
.vc-newscard:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(20, 33, 61, 0.1); }
.vc-newscard:focus-visible { outline: 2px solid var(--vc-gold); outline-offset: 2px; }
.vc-newscard__top {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.vc-newscard__tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
	background-color: rgba(20, 33, 61, 0.07);
	color: var(--vc-navy);
}
.vc-newscard__date { color: var(--vc-gray-light); font-size: 12px; }
.vc-newscard__title {
	font-weight: 600;
	margin-bottom: 8px;
	line-height: 1.35;
	color: var(--vc-navy);
	font-size: 15px;
	flex: 1;
	transition: color 0.15s;
}
.vc-newscard:hover .vc-newscard__title { color: var(--vc-gold-text); }
.vc-newscard__excerpt {
	color: var(--vc-gray);
	font-size: 13px;
	line-height: 1.6;
}
.vc-newscard__more {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 16px;
	color: var(--vc-gold-text);
	font-size: 12px;
	font-weight: 600;
}

/* ---------- Election strip ---------- */
.vc-election {
	background-color: var(--vc-surface-warm);
	border-top: 1px solid var(--vc-border);
	border-bottom: 1px solid var(--vc-border);
}
.vc-election__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--vc-sans);
}
.vc-election__toggle:focus-visible { outline: 2px solid var(--vc-gold); outline-offset: -2px; }
.vc-election__lead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vc-election__lead .vc-i-circle-check-big { color: var(--vc-gold); }
.vc-election__heading { color: var(--vc-navy); font-size: 15px; font-weight: 600; }
.vc-election__meta { color: var(--vc-gray); font-size: 14px; margin-left: 12px; }
.vc-election__status {
	display: none;
	padding: 2px 10px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 500;
	background-color: rgba(20, 33, 61, 0.08);
	color: var(--vc-navy);
}
@media (min-width: 640px) { .vc-election__status { display: inline-block; } }
.vc-election__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.vc-election__chevron { color: var(--vc-gray); transition: transform 0.2s; }
.vc-election__toggle[aria-expanded="true"] .vc-election__chevron { transform: rotate(180deg); }
.vc-election__panel { padding-bottom: 24px; }
.vc-election__panel[hidden] { display: none; }
.vc-election__tablewrap {
	border-radius: 16px;
	overflow-x: auto;
	border: 1px solid rgba(20, 33, 61, 0.1);
}
.vc-election table { width: 100%; border-collapse: collapse; }
.vc-election thead tr { background-color: var(--vc-navy); }
.vc-election th {
	text-align: left;
	padding: 12px 20px;
	color: rgba(251, 251, 248, 0.8);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
}
.vc-election th.vc-num, .vc-election td.vc-num { text-align: right; }
.vc-election tbody tr:nth-child(odd) { background-color: var(--vc-white); }
.vc-election tbody tr:nth-child(even) { background-color: #F8F8F5; }
.vc-election td {
	padding: 14px 20px;
	color: var(--vc-navy);
	font-size: 14px;
}
.vc-election td.vc-num { color: var(--vc-gray); font-variant-numeric: tabular-nums; }
.vc-election td.vc-pct { color: var(--vc-gold-text); font-weight: 600; }
.vc-election__note { margin-top: 12px; font-size: 12px; color: var(--vc-gray); }
.vc-election__note a { color: var(--vc-gold-text); }