/* =========================================================
   Vigo Classic — interior pages (department, meetings, news,
   search, 404) and the locked content patterns.
   All colour pairings here are checked against WCAG 2.1 AA.
   ========================================================= */

/* ---------- Interior page hero (navy band) ---------- */
.vc-pagehero {
	background: linear-gradient(135deg, #14213D 0%, #1a2d52 100%);
	padding: 48px 0 44px;
}
.vc-pagehero__eyebrow {
	color: var(--vc-gold); /* on navy: ~6:1, passes AA */
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0 0 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.vc-pagehero__eyebrow::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1.5px;
	background-color: var(--vc-gold);
}
.vc-pagehero__title {
	font-family: var(--vc-serif);
	color: var(--vc-cream);
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0;
}

/* Breadcrumbs — in the navy band above the eyebrow (QA 2026-08-07).
   Cream at .72 on the navy gradient is 10+:1, well clear of AA at 13px. */
.vc-crumbs { margin: 0 0 14px; }
.vc-crumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-family: var(--vc-sans);
	font-size: 13px;
}
.vc-crumbs__list li {
	display: flex;
	align-items: center;
	color: rgba(251, 251, 248, 0.72);
}
.vc-crumbs__list li + li::before {
	content: "›";
	margin: 0 8px;
	color: rgba(251, 251, 248, 0.4);
}
.vc-crumbs__list a {
	color: rgba(251, 251, 248, 0.72);
	text-decoration: none;
	padding: 6px 0; /* tap target without disturbing the line */
}
.vc-crumbs__list a:hover,
.vc-crumbs__list a:focus-visible { color: #fff; text-decoration: underline; }
.vc-crumbs__list [aria-current="page"] {
	color: rgba(251, 251, 248, 0.9);
	/* Long document titles: clip the current crumb, never wrap the trail. */
	max-width: min(48ch, 60vw);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
}

/* ---------- Interior body ---------- */
.vc-interior {
	padding: 48px 16px 72px;
}
@media (min-width: 640px) {
	.vc-interior { padding-inline: 32px; }
}
.vc-interior h2 {
	font-family: var(--vc-serif);
	font-size: clamp(20px, 2.5vw, 26px);
	margin-top: 40px;
	margin-bottom: 12px;
}
.vc-interior h3 {
	font-family: var(--vc-serif);
	font-size: 19px;
	margin-top: 24px;
	margin-bottom: 6px;
}
.vc-lede {
	font-size: 18px;
	line-height: 1.6;
	color: var(--vc-ink-lede);
}

/* Links in body copy: underlined, not colour-only (WCAG 1.4.1). */
.vc-interior a {
	color: var(--vc-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.vc-interior a:hover {
	color: var(--vc-gold-text);
}
.vc-interior a:focus-visible {
	outline: 2px solid var(--vc-gold-text);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------- Meta rows / term chips ---------- */
.vc-meta-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 20px;
}
.vc-meta-row .wp-block-post-terms,
.vc-meta-row .wp-block-post-date {
	margin: 0;
	font-size: 13px;
	color: var(--vc-gray);
}
.vc-meta-row .wp-block-post-terms a {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 9999px;
	background-color: rgba(20, 33, 61, 0.07);
	color: var(--vc-navy);
	font-weight: 600;
	text-decoration: none;
	font-size: 12px;
}
.vc-meta-row .wp-block-post-terms a:hover {
	background-color: rgba(20, 33, 61, 0.14);
}

/* ---------- Meeting details card ---------- */
.vc-meta-card {
	background-color: var(--vc-white);
	border: 1px solid var(--vc-border);
	border-left: 4px solid var(--vc-gold);
	border-radius: 12px;
	padding: 20px 24px;
	margin: 0 0 32px;
	box-shadow: var(--vc-shadow-card);
}
.vc-meta-card__list { margin: 0; }
.vc-meta-card__row {
	display: flex;
	gap: 12px;
	padding: 6px 0;
}
.vc-meta-card__row + .vc-meta-card__row {
	border-top: 1px solid var(--vc-border);
}
.vc-meta-card dt {
	flex: 0 0 90px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vc-gold-text); /* darkened gold: AA on white */
	padding-top: 3px;
}
.vc-meta-card dd {
	margin: 0;
	color: var(--vc-navy);
	font-size: 15px;
	font-weight: 500;
}

/* ---------- Link + document lists ---------- */
.vc-linklist .wp-block-post-template,
.vc-doclist .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.vc-linklist .wp-block-post-template > li,
.vc-doclist .wp-block-post-template > li {
	padding: 16px 18px;
	border: 1px solid var(--vc-border);
	border-radius: 12px;
	background-color: var(--vc-white);
	transition: box-shadow 0.15s, transform 0.15s;
}
.vc-linklist .wp-block-post-template > li:hover,
.vc-doclist .wp-block-post-template > li:hover {
	box-shadow: var(--vc-shadow-card);
	transform: translateY(-1px);
}
.vc-linklist .wp-block-post-title,
.vc-doclist .wp-block-post-title {
	margin: 0 0 4px;
	font-family: var(--vc-serif);
}
.vc-linklist .wp-block-post-title a,
.vc-doclist .wp-block-post-title a {
	text-decoration: none;
	color: var(--vc-navy);
}
.vc-linklist .wp-block-post-title a:hover,
.vc-doclist .wp-block-post-title a:hover {
	color: var(--vc-gold-text);
	text-decoration: underline;
}
.vc-linklist .wp-block-post-excerpt {
	margin: 0;
	color: var(--vc-gray);
	font-size: 14px;
}
.vc-doclist .vc-meta-row { margin-bottom: 0; margin-top: 8px; }

/* ---------- Meetings browse filter ---------- */
.vc-filter {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: flex-end;
	padding: 20px;
	margin: 0 0 28px;
	background-color: var(--vc-surface);
	border: 1px solid var(--vc-border);
	border-radius: 12px;
}
.vc-filter__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 170px;
	flex: 1;
}
.vc-filter label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vc-navy);
}
.vc-filter select {
	padding: 9px 12px;
	border-radius: 8px;
	border: 1px solid rgba(20, 33, 61, 0.2);
	background-color: var(--vc-white);
	color: var(--vc-navy);
	font-family: var(--vc-sans);
	font-size: 14px;
}
.vc-filter select:focus-visible {
	outline: 2px solid var(--vc-gold-text);
	outline-offset: 1px;
}
.vc-filter__actions {
	display: flex;
	gap: 8px;
	align-items: center;
}
.vc-filter .vc-btn-navy {
	border: 0;
	cursor: pointer;
	font-family: var(--vc-sans);
	padding: 10px 22px;
}

/* ---------- Search form ---------- */
.vc-searchform {
	margin: 0 0 32px;
}
.vc-searchform .wp-block-search__input {
	border-radius: 12px;
	border: 1.5px solid rgba(20, 33, 61, 0.2);
	padding: 12px 16px;
	font-family: var(--vc-sans);
	font-size: 16px;
}
.vc-searchform .wp-block-search__input:focus {
	outline: 2px solid var(--vc-gold-text);
	outline-offset: 1px;
}
.vc-searchform .wp-block-search__button {
	background-color: var(--vc-navy);
	color: var(--vc-cream);
	border: 0;
	border-radius: 9999px;
	padding: 12px 26px;
	font-weight: 600;
	cursor: pointer;
}
.vc-searchform .wp-block-search__button:hover {
	background-color: #1a2d52;
}

/* ---------- Department header pattern ---------- */
.vc-dept-header { margin-bottom: 8px; }
.vc-dept-header__lede {
	font-size: 18px;
	line-height: 1.65;
	color: var(--vc-ink-lede);
}
.vc-contact-card {
	background-color: var(--vc-surface);
	border: 1px solid var(--vc-border);
	border-radius: 12px;
	padding: 20px 22px;
}
.vc-contact-card__title {
	font-size: 12px !important;
	font-family: var(--vc-sans) !important;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vc-gold-text);
	margin: 0 0 10px !important;
}
.vc-contact-card__sub {
	font-size: 12px !important;
	font-family: var(--vc-sans) !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vc-navy);
	margin: 16px 0 4px !important;
}
.vc-contact-card p {
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.6;
}

/* ---------- Notice / alert ---------- */
.vc-notice {
	background-color: #FDF6F6;
	border: 1px solid rgba(139, 26, 26, 0.25);
	border-left: 4px solid var(--vc-brick);
	border-radius: 10px;
	padding: 16px 20px;
	margin: 24px 0;
}
.vc-notice__label {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 6px;
	color: var(--vc-brick); /* 7.6:1 on #FDF6F6 — AA */
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.vc-notice p:last-child { margin-bottom: 0; }

/* ---------- Archive notice (ADA) ---------- */
.vc-archive-notice {
	background-color: var(--vc-surface);
	border: 1px solid var(--vc-border);
	border-radius: 12px;
	padding: 24px 26px;
	margin: 32px 0;
}
.vc-archive-notice__title {
	font-family: var(--vc-serif) !important;
	font-size: 19px !important;
	margin: 0 0 10px !important;
}
.vc-archive-notice p {
	font-size: 15px;
	line-height: 1.65;
	margin-bottom: 10px;
}
.vc-archive-notice p:last-child { margin-bottom: 0; }

/* ---------- FAQ ---------- */
.vc-faq__item {
	border: 1px solid var(--vc-border);
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 8px;
	background-color: var(--vc-white);
}
.vc-faq__item summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--vc-navy);
	font-size: 15px;
}
.vc-faq__item summary:focus-visible {
	outline: 2px solid var(--vc-gold-text);
	outline-offset: 2px;
	border-radius: 4px;
}
.vc-faq__item[open] summary { margin-bottom: 8px; }

/* ---------- Tables in content ---------- */
.vc-interior table,
.vc-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.vc-interior th,
.vc-table th {
	background-color: var(--vc-navy);
	color: var(--vc-cream);
	text-align: left;
	padding: 10px 14px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
}
.vc-interior td,
.vc-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--vc-border);
}
.vc-interior figcaption,
.vc-table figcaption {
	font-size: 13px;
	color: var(--vc-gray);
	margin-top: 8px;
}

/* ---------- Pagination ---------- */
.wp-block-query-pagination {
	margin-top: 32px;
	gap: 8px;
}
.wp-block-query-pagination a {
	color: var(--vc-navy);
	text-decoration: none;
	padding: 6px 12px;
	border-radius: 8px;
	border: 1px solid var(--vc-border);
}
.wp-block-query-pagination a:hover {
	background-color: var(--vc-navy);
	color: var(--vc-cream);
}
.wp-block-query-pagination .current {
	font-weight: 700;
	padding: 6px 12px;
}

/* ---------- Featured image ---------- */
.vc-featured img { border-radius: 12px; }

/* =========================================================
   Landing / router pages (pillars, section hubs, Tax Trilemma)
   ========================================================= */

/* Section grid — a pillar page renders each section as a card of links
   (essentially the mega-menu as a page). */
.vc-sectiongrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 8px 0 8px;
}
@media (min-width: 640px) { .vc-sectiongrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vc-sectiongrid { grid-template-columns: repeat(3, 1fr); } }
.vc-section {
	background-color: var(--vc-white);
	border: 1px solid var(--vc-border);
	border-radius: 16px;
	padding: 22px 24px;
	box-shadow: var(--vc-shadow-card);
}
.vc-section__title {
	font-family: var(--vc-serif) !important;
	font-size: 18px !important;
	margin: 0 0 12px !important;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--vc-border);
}
.vc-section__title a { text-decoration: none; color: var(--vc-navy); }
.vc-section__title a:hover { color: var(--vc-gold-text); }
.vc-section ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vc-section li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 8px;
	border-radius: 8px;
	color: var(--vc-ink-soft);
	font-size: 14px;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}
.vc-section li a:hover { background-color: var(--vc-surface); color: var(--vc-navy); }
.vc-section li a::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 9999px;
	background-color: var(--vc-gold);
	flex-shrink: 0;
}

/* Big card grid — hub pages & the Tax Trilemma. */
.vc-cardgrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 8px 0;
}
@media (min-width: 700px) { .vc-cardgrid { grid-template-columns: repeat(3, 1fr); } }
.vc-cardgrid--2 { }
@media (min-width: 700px) { .vc-cardgrid--2 { grid-template-columns: repeat(2, 1fr); } }
.vc-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background-color: var(--vc-white);
	border: 1px solid var(--vc-border);
	border-left: 4px solid var(--vc-gold);
	border-radius: 14px;
	padding: 22px 24px;
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.15s;
}
.vc-card:hover { transform: translateY(-2px); box-shadow: var(--vc-shadow-card); }
.vc-card:focus-visible { outline: 2px solid var(--vc-gold-text); outline-offset: 2px; }
.vc-card__title {
	font-family: var(--vc-serif);
	font-size: 19px;
	font-weight: 700;
	color: var(--vc-navy);
	line-height: 1.25;
}
.vc-card__desc { color: var(--vc-gray); font-size: 14px; line-height: 1.55; }
.vc-card__more {
	margin-top: auto;
	color: var(--vc-gold-text);
	font-size: 13px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* =========================================================
   Document file block (interim PDF viewer + download)
   ========================================================= */
.vc-docfile {
	border: 1px solid var(--vc-border);
	border-radius: 14px;
	background-color: var(--vc-white);
	overflow: hidden;
	margin: 0 0 32px;
	box-shadow: var(--vc-shadow-card);
}
.vc-docfile__bar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 16px 20px;
	background-color: var(--vc-surface);
	border-bottom: 1px solid var(--vc-border);
}
.vc-docfile__badge {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding: 4px 10px;
	border-radius: 6px;
	background-color: var(--vc-navy);
	color: var(--vc-cream);
}
.vc-docfile__size { font-size: 13px; color: var(--vc-gray); }
.vc-docfile__download {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	padding: 10px 20px;
	border-radius: 9999px;
	background-color: var(--vc-navy);
	color: var(--vc-cream) !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
}
.vc-docfile__download:hover { background-color: #1a2d52; color: #fff !important; }
.vc-docfile__download:focus-visible { outline: 2px solid var(--vc-gold-text); outline-offset: 2px; }
.vc-docfile__open { font-size: 13px; color: var(--vc-navy); }
.vc-docfile__viewer { background-color: #525659; }
.vc-docfile__viewer object { display: block; width: 100%; height: 70vh; min-height: 420px; border: 0; }
.vc-docfile__fallback { color: #fff; padding: 24px; margin: 0; }
.vc-docfile__fallback a { color: #fff; }
.vc-docfile__a11y {
	margin: 0;
	padding: 16px 20px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--vc-ink-lede);
	background-color: var(--vc-surface-warm);
	border-top: 1px solid var(--vc-border);
}
.vc-docfile__archived {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 12px 20px;
	font-size: 13px;
	color: var(--vc-gray);
	background-color: var(--vc-surface);
	border-top: 1px solid var(--vc-border);
}
.vc-filter input[type="search"] {
	padding: 9px 12px;
	border-radius: 8px;
	border: 1px solid rgba(20, 33, 61, 0.2);
	background-color: var(--vc-white);
	color: var(--vc-navy);
	font-family: var(--vc-sans);
	font-size: 14px;
}
.vc-filter input[type="search"]:focus-visible { outline: 2px solid var(--vc-gold-text); outline-offset: 1px; }

@media (max-width: 640px) {
	.vc-docfile__download { margin-left: 0; width: 100%; justify-content: center; }
	.vc-docfile__viewer object { height: 60vh; min-height: 320px; }
}

/* Empty state for the front-page news section before any post is published. */
.vc-news__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 28px 24px;
	border: 1px dashed var(--vc-line, #d9d9d2);
	border-radius: 10px;
	color: var(--vc-gray, #5B636F);
	font-size: 15px;
	text-align: center;
}

/* Empty state for the front-page calendar when nothing is scheduled. */
.vc-cal__empty {
	margin: 0;
	padding: 24px 20px;
	color: var(--vc-gray, #5B636F);
	font-size: 15px;
	text-align: center;
}

/* ---------------------------------------------------------------
   Events: single page + calendar archive
   --------------------------------------------------------------- */
.vc-eventcard {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin: 0 0 28px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--vc-line, #e3e3dc);
	border-left: 4px solid var(--vc-gold, #BC9B45);
	border-radius: 10px;
}
.vc-eventcard.is-past { border-left-color: var(--vc-gray, #5B636F); opacity: .92; }
.vc-eventcard__date {
	flex: 0 0 auto;
	display: flex; flex-direction: column; align-items: center;
	min-width: 62px; padding: 8px 10px;
	background: var(--vc-navy, #14213D); color: #fff; border-radius: 8px;
}
.vc-eventcard__day { font-size: 26px; font-weight: 700; line-height: 1; }
.vc-eventcard__mon { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.vc-eventcard__yr  { font-size: 11px; opacity: .75; }
.vc-eventcard__list { margin: 0; }
.vc-eventcard__row { display: flex; gap: 12px; margin-bottom: 6px; }
.vc-eventcard__row dt {
	flex: 0 0 54px; margin: 0; color: var(--vc-gray, #5B636F);
	font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
}
.vc-eventcard__row dd { margin: 0; font-size: 16px; }
.vc-eventcard__allday { color: var(--vc-gray, #5B636F); }
.vc-eventcard__past { margin: 10px 0 0; color: var(--vc-gray, #5B636F); font-size: 14px; }

.vc-calpage__filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 28px; }
.vc-calpage__spacer { flex: 1 1 auto; }
.vc-chip {
	display: inline-block; padding: 7px 15px; border-radius: 9999px;
	border: 1px solid var(--vc-line, #e3e3dc); background: #fff;
	font-size: 14px; font-weight: 500; text-decoration: none; color: inherit;
}
.vc-chip:hover, .vc-chip:focus { border-color: var(--vc-navy, #14213D); }
.vc-chip.is-on { background: var(--vc-navy, #14213D); border-color: var(--vc-navy, #14213D); color: #fff; }
.vc-chip--ghost { border-style: dashed; }
.vc-calpage__month {
	margin: 34px 0 12px; padding-bottom: 8px;
	border-bottom: 2px solid var(--vc-gold, #BC9B45);
	font-size: 20px;
}
.vc-calpage__month:first-of-type { margin-top: 0; }
.vc-calpage__group { display: flex; flex-direction: column; gap: 10px; }
.vc-calpage__empty {
	padding: 30px 24px; border: 1px dashed var(--vc-line, #d9d9d2);
	border-radius: 10px; text-align: center; color: var(--vc-gray, #5B636F);
}
.vc-calrow {
	display: flex; gap: 16px; align-items: center;
	padding: 14px 18px; background: #fff;
	border: 1px solid var(--vc-line, #e3e3dc); border-radius: 10px;
	text-decoration: none; color: inherit;
	transition: border-color .15s, transform .15s;
}
.vc-calrow:hover, .vc-calrow:focus-visible {
	border-color: var(--vc-navy, #14213D); transform: translateX(2px);
}
.vc-calrow__date {
	flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
	min-width: 50px; padding: 6px 8px; border-radius: 8px;
	background: var(--vc-cream, #F0F0EC);
}
.vc-calrow__day { font-size: 20px; font-weight: 700; line-height: 1.05; }
.vc-calrow__mon { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--vc-gray, #5B636F); }
.vc-calrow__body { flex: 1 1 auto; min-width: 0; }
.vc-calrow__title { display: block; font-weight: 600; margin-bottom: 3px; }
.vc-calrow__meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--vc-gray, #5B636F); font-size: 13px; }
.vc-calrow__meta span { display: inline-flex; align-items: center; gap: 5px; }
.vc-calrow__tag {
	flex: 0 0 auto; padding: 4px 11px; border-radius: 9999px;
	background: var(--vc-cream, #F0F0EC); color: var(--vc-gray, #5B636F);
	font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
}
.vc-calrow--closures { border-left: 4px solid #B4472F; }
.vc-calrow--meetings { border-left: 4px solid var(--vc-navy, #14213D); }
.vc-calrow--community { border-left: 4px solid var(--vc-gold, #BC9B45); }
@media (max-width: 640px) {
	.vc-calrow { align-items: flex-start; }
	.vc-calrow__tag { display: none; }
	.vc-eventcard { flex-direction: column; }
}

/* ---------------------------------------------------------------
   Department pages + routing pages
   Written mobile-first: the base rules ARE the phone layout, and the
   desktop grid only switches on at 900px. County business gets done on
   phones, so single-column is the default rather than the fallback.
   --------------------------------------------------------------- */

/* --- Top-task buttons --------------------------------------- */
.vc-tasks {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--vc-border, rgba(20, 33, 61, .1));
}
.vc-task {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/* 52px tall at default type: comfortably above the 44px minimum
	   touch target, and reachable one-handed. */
	min-height: 52px;
	padding: 13px 20px;
	border: 1px solid var(--vc-border, rgba(20, 33, 61, .1));
	border-radius: 9999px;
	background: #fff;
	color: var(--vc-navy, #14213D);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s, background-color .15s;
}
.vc-task:hover, .vc-task:focus-visible { border-color: var(--vc-navy, #14213D); }
.vc-task--primary {
	background: var(--vc-gold, #BC9B45);
	border-color: var(--vc-gold, #BC9B45);
	color: var(--vc-navy, #14213D);
}
.vc-task__arrow { flex: 0 0 auto; opacity: .65; }

@media (min-width: 640px) {
	/* Enough width for buttons to sit side by side and size to content. */
	.vc-tasks { flex-direction: row; flex-wrap: wrap; }
	.vc-task { justify-content: flex-start; }
}

/* --- Grouped link columns ----------------------------------- */
.vc-linkcols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	margin-bottom: 8px;
}
@media (min-width: 620px) { .vc-linkcols { grid-template-columns: repeat(2, 1fr); gap: 30px; } }
@media (min-width: 980px) { .vc-linkcols { grid-template-columns: repeat(3, 1fr); } }

.vc-linkcol__head {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--vc-gold, #BC9B45);
	font-family: var(--vc-sans, system-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--vc-navy, #14213D);
}
.vc-linkcol__list { list-style: none; margin: 0; padding: 0; }
.vc-linkcol__list li { margin: 0 0 2px; }
.vc-linkcol__list a {
	display: block;
	/* Padded to a 44px tap target rather than a bare text link — these
	   lists are the page's only navigation on a phone. */
	padding: 11px 12px 11px 0;
	color: var(--vc-ink-soft, #374151);
	font-size: 15.5px;
	text-decoration: none;
	border-bottom: 1px solid var(--vc-border, rgba(20, 33, 61, .07));
}
.vc-linkcol__list a:hover, .vc-linkcol__list a:focus-visible {
	color: var(--vc-navy, #14213D);
	text-decoration: underline;
}
.vc-linkcol__note { display: block; padding-bottom: 8px; color: var(--vc-gray, #5B636F); font-size: 13px; }

/* --- Department page grid ----------------------------------- */
.vc-deptpage__grid { display: block; }
.vc-deptpage__main { min-width: 0; }

.vc-deptside { margin-top: 34px; display: flex; flex-direction: column; gap: 16px; }
.vc-deptside__box {
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--vc-border, rgba(20, 33, 61, .1));
	border-radius: 12px;
}
.vc-deptside__head {
	margin: 0 0 12px;
	font-family: var(--vc-sans, system-ui);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vc-navy, #14213D);
}
.vc-deptside__dl { margin: 0; }
.vc-deptside__dl dt {
	margin-top: 12px;
	color: var(--vc-gray, #5B636F);
	font-size: 11.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.vc-deptside__dl dt:first-child { margin-top: 0; }
.vc-deptside__dl dd { margin: 2px 0 0; font-size: 15px; }
/* Phone/email in the contact list are inline by default, giving an 18px-tall
   tap target. Pad them out without disturbing the surrounding text flow. */
.vc-deptside__dl dd a {
	display: inline-block;
	padding: 13px 0;
	line-height: 1.35;
}
.vc-deptside__list { list-style: none; margin: 0; padding: 0; }
.vc-deptside__list li { margin: 0; }
.vc-deptside__list a {
	display: block;
	/* 11px + 11px + line-height clears the 44px minimum touch target; at 9px
	   these measured 42px on a phone. */
	padding: 11px 0;
	font-size: 14.5px;
	color: var(--vc-navy, #14213D);
	border-bottom: 1px solid var(--vc-border, rgba(20, 33, 61, .07));
}
.vc-deptside__list li:last-child a { border-bottom: 0; }
.vc-deptside__count { margin: 0; font-size: 14.5px; }
.vc-deptside__count a { display: inline-block; padding: 12px 0; line-height: 1.35; }

@media (min-width: 900px) {
	/* Sidebar only becomes a sidebar when there is room for one. Below this
	   it sits after the content: someone on a phone came for the answer,
	   not the mailing address. */
	.vc-deptpage__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 40px;
		align-items: start;
	}
	.vc-deptside {
		margin-top: 0;
		position: sticky;
		top: 24px;
		/* A rail taller than the screen used to pin its top and hide its
		   tail — on Area Planning the "181 documents" link sat below the
		   fold until you reached the page bottom. Let the rail scroll
		   itself instead (QA 2026-08-07). */
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* The rail is decoration around the content; never let it trap a tall
   contact card above the fold on short viewports. */
@media (min-width: 900px) and (max-height: 700px) {
	.vc-deptside { position: static; }
}

/* Legacy content guard (QA 2026-08-07): imported pages carry images with
   native pixel dimensions — Homes For Children embeds 4400px brochure
   scans — and Word-export hanging indents. Never let either break the
   column. The indent pair is also stripped content-side; this is the
   belt to that suspenders. */
.vc-deptpage__main img,
.vc-interior img {
	max-width: 100%;
	height: auto;
}

/* Embedded document/event lists ([vigo_documents] / [vigo_events]) — the
   department one-stop building blocks. */
.vc-embed-docs, .vc-embed-events { margin: 28px 0; }
.vc-embed-docs__head, .vc-embed-events__head {
	font-family: var(--vc-serif);
	font-size: 22px;
	margin: 0 0 10px;
}
.vc-embed-docs__list, .vc-embed-events__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(20, 33, 61, 0.1);
}
.vc-embed-docs__item, .vc-embed-events__item {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	justify-content: space-between;
	padding: 11px 2px;
	border-bottom: 1px solid rgba(20, 33, 61, 0.1);
	font-size: 15px;
}
.vc-embed-docs__item a, .vc-embed-events__item a { text-decoration: none; }
.vc-embed-docs__item a:hover, .vc-embed-events__item a:hover { text-decoration: underline; }
.vc-embed-docs__meta, .vc-embed-events__date {
	color: var(--vc-gray);
	font-size: 13px;
	white-space: nowrap;
}
.vc-embed-events__date { min-width: 9em; }
.vc-embed-docs__all, .vc-embed-events__all { margin: 14px 0 0; }

/* Staff cards ([vigo_staff]) — a scannable grid, deliberately not a
   carousel: every name visible, printable, keyboard-friendly. */
.vc-staff { margin: 28px 0; }
.vc-staff__head, .vc-staff__dept {
	font-family: var(--vc-serif);
	font-size: 22px;
	margin: 26px 0 12px;
}
.vc-staff__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: 12px;
}
.vc-staff__card {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid rgba(20, 33, 61, 0.1);
	border-radius: 12px;
	font-size: 14.5px;
}
.vc-staff__name { font-weight: 700; color: var(--vc-navy); }
.vc-staff__role {
	color: var(--vc-gray);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.vc-staff__contact {
	text-decoration: none;
	font-size: 13.5px;
	padding: 3px 0; /* tap target */
	word-break: break-all;
}
.vc-staff__contact:hover { text-decoration: underline; }

/* Three link columns fit a full-width page. They do not fit the main column of
   a department page: the interior container is constrained, so beside a 300px
   sidebar each column lands around 140px and every court name wraps mid-title.
   Cap at two there regardless of viewport width — the constraint is the
   container, not the screen. */
@media (min-width: 620px) {
	.vc-deptpage__main .vc-linkcols { grid-template-columns: repeat(2, 1fr); }
}


/* The department grid sits inside a constrained group, so it inherits the 840px
   contentSize — which leaves the main column at 500px once the 300px rail and
   gap are taken out, narrower than the plain pages it sits alongside. Widen the
   grid so the CONTENT keeps roughly the standard measure and the rail is extra.
   Specificity beats the constrained-layout rule WordPress emits. */
@media (min-width: 900px) {
	.vc-interior.vc-deptpage > .vc-deptpage__grid {
		max-width: 1180px;
		margin-inline: auto;
	}
}