:root {
  --color-bg: #ffffff;
  --color-text: #222222;
  --color-muted: #555555;
  --color-surface: #eaf9c7;
  --color-primary: #1a8a42;
  --color-primary-text: #ffffff;
  --font-body: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;
  --content-width: 900px;
  --radius: 2px;
  --space: 1rem;
}
/* pet articles */
/* The pet articles. Layout only: fonts, colours, headings and links come from the website's theme. */
.vwa { --vwa-accent: var(--color-primary, #0a7d6e); --vwa-accent-contrast: var(--color-primary-text, #fff); --vwa-gap: 1.75rem; --vwa-radius: var(--radius, 8px); --vwa-border: rgba(128, 128, 128, .3); --vwa-muted: var(--color-muted, #6b6b6b); max-width: var(--content-width, 1100px); margin: 0 auto; padding: 1.5rem 1rem; box-sizing: border-box; container-type: inline-size; }
.vwa-heading, .vwa-article__title { margin-top: 0; }
.vwa-empty { padding: 1rem 0; }
.vwa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vwa-meta { color: var(--vwa-muted); font-size: .875rem; margin: 0 0 .5rem; }
.vwa-meta__categories::before { content: "·"; margin: 0 .4rem; }
.vwa-meta__date:first-child + .vwa-meta__categories::before { content: "·"; }
.vwa-meta > .vwa-meta__categories:first-child::before { content: none; }

.vwa-filter__list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--vwa-gap); padding: 0; }
.vwa-filter__button { display: inline-flex; gap: .4rem; align-items: center; padding: .35rem .8rem; border: 1px solid var(--vwa-border); border-radius: 999px; text-decoration: none; color: inherit; }
.vwa-filter__button:hover { border-color: var(--vwa-accent); }
.vwa-filter__button.is-active { background: var(--vwa-accent); border-color: var(--vwa-accent); color: var(--vwa-accent-contrast); }
.vwa-filter__count { font-size: .75rem; opacity: .75; }

.vwa-articles { display: grid; gap: var(--vwa-gap); }
.vwa-articles--grid { grid-template-columns: repeat(var(--vwa-cols, 3), minmax(0, 1fr)); }
.vwa-cols-1 { --vwa-cols: 1; } .vwa-cols-2 { --vwa-cols: 2; } .vwa-cols-3 { --vwa-cols: 3; } .vwa-cols-4 { --vwa-cols: 4; }
@container (max-width: 760px) { .vwa-articles--grid { grid-template-columns: repeat(min(var(--vwa-cols, 3), 2), minmax(0, 1fr)); } }
@container (max-width: 480px) { .vwa-articles--grid { grid-template-columns: minmax(0, 1fr); } }
.vwa-card { display: flex; flex-direction: column; border: 1px solid var(--vwa-border); border-radius: var(--vwa-radius); overflow: hidden; }
.vwa-articles--list .vwa-card { flex-direction: row; }
.vwa-articles--list .vwa-card__media { flex: 0 0 30%; }
@container (max-width: 480px) { .vwa-articles--list .vwa-card { flex-direction: column; } .vwa-articles--list .vwa-card__media { flex-basis: auto; } }
.vwa-card__media { display: block; }
.vwa-card__image { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vwa-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.vwa-card__title { font-size: 1.2rem; margin: 0; }
.vwa-card__title a { text-decoration: none; color: inherit; }
.vwa-card__excerpt { margin: 0; }
.vwa-card__more { margin-top: auto; padding-top: .4rem; color: var(--vwa-accent); }

.vwa-pagination__list { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: var(--vwa-gap) 0 0; padding: 0; }
.vwa-pagination__link { display: inline-block; min-width: 2.2rem; text-align: center; padding: .35rem .7rem; border: 1px solid var(--vwa-border); border-radius: var(--vwa-radius); text-decoration: none; color: inherit; }
a.vwa-pagination__link:hover { border-color: var(--vwa-accent); }
.vwa-pagination__link.is-current { background: var(--vwa-accent); border-color: var(--vwa-accent); color: var(--vwa-accent-contrast); }
.vwa-pagination__gap { padding: .35rem .3rem; }

.vwa-article { max-width: 46rem; margin: 0 auto; }
.vwa-article__media { margin: 0 0 1.25rem; }
.vwa-article__image { display: block; max-width: 100%; height: auto; border-radius: var(--vwa-radius); }
.vwa-article__content img { max-width: 100%; height: auto; }
.vwa-article__content .copyright { color: var(--vwa-muted); font-size: .875rem; }
.vwa-back a { color: var(--vwa-accent); }
.vwa-share { margin: 1.5rem 0; }
.vwa-share__label { margin: 0 0 .4rem; font-weight: 600; }
.vwa-share__list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.vwa-share__button { display: inline-block; padding: .35rem .8rem; border: 1px solid var(--vwa-border); border-radius: 999px; text-decoration: none; color: inherit; }
.vwa-share__button:hover { border-color: var(--vwa-accent); }

/* page layout (Appearance) */
html { background-color: #18a34a; }
body { max-width: 960px; margin: 1.25rem auto; background: var(--color-bg); box-shadow: 0 2px 18px rgba(0, 0, 0, .18); }
@media (max-width: 700px) { html { background: var(--color-bg); } body { margin: 0; box-shadow: none; } }
:root { --bar-bg: #1a1a1a; }
:root { --bar-fg: #eaf9c7; }
:root { --bar-active: #1fbf5a; }

/* 9th Avenue Vet: the green page, serif headings and dark menu bar of the old site */
body { background: linear-gradient(#18a34a 0, #bde797 360px, #ffffff 760px) no-repeat, #ffffff; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; color: #000; }
a { color: #4f7a12; }
.header-top { position: relative; }
.header-brand img, .header-brand .logo img { height: 150px !important; width: auto !important; max-height: none !important; }
.header-tagline { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); margin: 0; font: 400 2.6rem Georgia, "Times New Roman", serif; color: #000 !important; text-shadow: none !important; }
.site-sidebar h2 { background: linear-gradient(#4a4a4a, #000); color: #eaf9c7; font: 700 .85rem Arial, Helvetica, sans-serif; padding: .4rem .6rem; margin: 1.2rem 0 .6rem; display: block; width: 100%; }
.site-sidebar .sidebar-image img[alt="Visit our Facebook page"] { width: 70px; height: auto; }
.site-sidebar .sidebar-image img[alt="vetdirectory"] { max-width: 180px; height: auto; }
@media (max-width: 700px) { .header-brand img { height: 90px; } .header-tagline { position: static; transform: none; font-size: 1.6rem; } }