/*
* pages-g.css — DESIGN-LANGUAGE-G §2.5–2.9 + §2.11 rollout.
*
* Brings trust pages (About, Editorial Policy, Medical Disclaimer, Contact),
* the money page (Talk to an Avian Vet), category archives, and the 404
* template to the sitewide G language. Text on trust pages is UNTOUCHED —
* this stylesheet reskins existing DOM only.
*
* Loaded (only) on:
* body.avg-trust — page IDs 207 (About), 208, 801 (Editorial), 802 (Disclaimer), 831 (Contact)
* body.avg-money — page ID 800 (Talk to an Avian Vet)
* body.avg-cat — every WordPress category archive (except Tier E)
* body.avg-404 — the 404 template
*
* Enqueued by avianvets_g_pages_enqueue() in functions.php after chrome-g.css
* so it wins the cascade for these scopes without altering hub/article pages.
*
* Owner-ruling anchors:
* - Category full-bleed hero (owner C1, 2026-08-18) — §2.9 point 2.
* - Trust template floor (owner T1) — §2.6 / §2.7 / §2.8.
* - Emergency solid-coral single-source — §2.5 / §1.6.
* - 404 mirrors homepage hub tiles — §2.11.
*
* DO NOT redecide G tokens here. Every color and dimension resolves to a
* design-tokens.css variable so a token change flows through.
*/
/* ---------------------------------------------------------------
* 1. Scoped token remap
* ---------------------------------------------------------------
* The pre-G component library uses --surface / --surface-alt / --border /
* --border-soft / --text-primary / --text-muted / --accent tokens declared
* in style.css :root. Redeclare those tokens under our scope so every
* component using them (av-service-hero, av-provider-card, av-policy-toc,
* av-commitment, av-contact-card, av-endplate, av-emergency, av-faq,
* av-checklist, av-founder-portrait, av-process-*, av-category-*)
* inherits the G palette without per-component rewrites.
* --------------------------------------------------------------- */
body.avg-trust,
body.avg-money,
body.avg-cat,
body.avg-404 {
--surface: var(--page);
--surface-alt: var(--cream);
--surface-dark: var(--rule);
--surface-tint: var(--cream);
--border: var(--rule);
--border-soft: var(--hair);
--text-primary: var(--ink);
--text-muted: var(--ink-3);
--text-light: var(--mute);
--accent: var(--coral);
--link: var(--coral-deep);
/* --tier-accent is the category-band eyebrow color; wire to hub-deep so
the eyebrow tone matches the section it lives in. On trust scopes
--hub-deep resolves to coral-deep via the trust hub alias in
design-tokens.css line 103. */
--tier-accent: var(--hub-deep);
}
/* Page ground for the whole scope — G paper, not the parent theme's white. */
body.avg-trust,
body.avg-money,
body.avg-cat,
body.avg-404 {
background: var(--paper);
color: var(--ink);
font-family: var(--body);
font-size: 16px;
line-height: 1.6;
letter-spacing: 0;
}
/* Nunito display face on every H1–H4 inside these scopes. Overrides the
parent theme's default heading stack, which was pulling headings into
Roboto and reading as free-template. */
body.avg-trust h1, body.avg-trust h2, body.avg-trust h3, body.avg-trust h4,
body.avg-money h1, body.avg-money h2, body.avg-money h3, body.avg-money h4,
body.avg-cat h1, body.avg-cat h2, body.avg-cat h3, body.avg-cat h4,
body.avg-404 h1, body.avg-404 h2, body.avg-404 h3, body.avg-404 h4 {
font-family: var(--display);
color: var(--ink);
letter-spacing: -0.02em;
}
body.avg-trust h2, body.avg-money h2, body.avg-cat h2, body.avg-404 h2 {
font-weight: 800;
font-size: 32px;
line-height: 1.1;
margin-top: 48px;
margin-bottom: 16px;
}
body.avg-trust h3, body.avg-money h3, body.avg-cat h3, body.avg-404 h3 {
font-weight: 800;
font-size: 22px;
line-height: 1.2;
margin-top: 32px;
margin-bottom: 12px;
}
body.avg-trust h4, body.avg-money h4, body.avg-cat h4, body.avg-404 h4 {
font-weight: 700;
font-size: 17px;
line-height: 1.25;
margin-top: 24px;
margin-bottom: 8px;
}
@media (min-width: 900px) {
body.avg-trust h2, body.avg-money h2, body.avg-cat h2, body.avg-404 h2 { font-size: 36px; }
}
/* Anchor color — coral-deep across these scopes. */
body.avg-trust a, body.avg-money a, body.avg-cat a, body.avg-404 a { color: var(--coral-deep); }
body.avg-trust a:hover, body.avg-money a:hover, body.avg-cat a:hover, body.avg-404 a:hover { color: var(--ink); }
/* Parent theme page-title H1 — swap into Nunito 800 sizing so the trust
pages' own H1 reads as G. This mirrors what article-g.css does for
article H1s. */
body.avg-trust .page-title h1,
body.avg-money .page-title h1,
body.avg-404 .page-title h1 {
font-family: var(--display);
font-weight: 800;
font-size: 48px;
line-height: 1.05;
letter-spacing: -0.026em;
color: var(--ink);
margin: 0 0 8px;
}
@media (max-width: 640px) {
body.avg-trust .page-title h1,
body.avg-money .page-title h1,
body.avg-404 .page-title h1 { font-size: 32px; }
}
/* ---------------------------------------------------------------
* 2. Trust pages — hero band, jump-list, callouts, portrait,
* process grid, references, endplate.
* (§2.6 policy + §2.7 contact + §2.8 About)
* --------------------------------------------------------------- */
/* Give trust-page H1 area a subtle cream ground so it reads as a hero band,
even though we can't wrap it in extra markup (text-integrity law). */
body.avg-trust .page-title {
background: var(--cream);
border-bottom: 1.5px solid var(--rule);
padding: 44px 0 28px;
margin: 0 0 32px !important;
text-align: left;
}
body.avg-trust .page-title .row,
body.avg-trust .page-title > * {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-left: 32px;
padding-right: 32px;
}
body.avg-trust .page-title h1 {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding: 0 32px;
text-align: left !important;
}
@media (max-width: 640px) {
body.avg-trust .page-title { padding: 32px 0 20px; }
body.avg-trust .page-title h1 { padding: 0 20px; }
}
/* Trust-page content column — respect wrap width, keep prose comfortable */
body.avg-trust .non-VC-page .sidebar-content,
body.avg-trust .non-VC-page .small-12.medium-9 {
max-width: 780px;
}
body.avg-trust .non-VC-page .row {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding: 0 32px;
}
@media (max-width: 640px) {
body.avg-trust .non-VC-page .row { padding: 0 20px; }
}
/* Jump list — G rules on cream, coral hover */
body.avg-trust .av-jumplist,
body.avg-money .av-jumplist {
background: var(--cream);
border: 1.5px solid var(--hair);
border-radius: var(--radius-2);
padding: 22px 26px;
margin: 28px 0 40px;
}
body.avg-trust .av-jumplist__title,
body.avg-money .av-jumplist__title {
font-family: var(--meta);
font-weight: var(--meta-w);
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 12px;
}
body.avg-trust .av-jumplist__list,
body.avg-money .av-jumplist__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 6px;
}
@media (min-width: 900px) {
body.avg-trust .av-jumplist__list,
body.avg-money .av-jumplist__list { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
body.avg-trust .av-jumplist__list a,
body.avg-money .av-jumplist__list a {
color: var(--ink);
text-decoration: none;
border-bottom: 1px dotted var(--hair);
padding-bottom: 2px;
}
body.avg-trust .av-jumplist__list a:hover,
body.avg-money .av-jumplist__list a:hover {
color: var(--coral-deep);
border-bottom-color: var(--coral);
}
/* Founder portrait — hero-figure treatment (paper padding + 1.5px rule + italic caption)
Retains the existing markup: ![]()
*/
body.avg-trust .av-founder-portrait {
max-width: 280px;
padding: 14px;
background: var(--page);
border: 1.5px solid var(--rule);
border-radius: var(--radius-0);
margin: 0 0 32px;
}
body.avg-trust .av-founder-portrait img {
display: block;
width: 100%;
height: auto;
border-radius: 0;
filter: contrast(1.02) saturate(1.02);
}
/* If a figcaption exists, style it G. If not, no effect. */
body.avg-trust .av-founder-portrait figcaption {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--hair);
font-family: var(--body);
font-style: italic;
font-size: 13px;
color: var(--ink-2);
}
/* Pull-quote — coral rule, italic Nunito 700 */
body.avg-trust .av-pullquote,
body.avg-money .av-pullquote {
border-left: 4px solid var(--coral);
padding: 4px 0 4px 24px;
margin: 32px 0;
font-family: var(--display);
font-weight: 700;
font-style: italic;
font-size: 22px;
line-height: 1.4;
color: var(--ink);
background: transparent;
}
body.avg-trust .av-pullquote p,
body.avg-money .av-pullquote p { margin: 0; }
/* Process grid (About) — 3-col, framed square figures with G caption treatment */
body.avg-trust .av-process-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 28px 0 40px;
}
@media (max-width: 640px) {
body.avg-trust .av-process-grid { grid-template-columns: 1fr; gap: 16px; }
}
body.avg-trust .av-process-grid .av-figure {
background: var(--page);
border: 1.5px solid var(--hair);
border-radius: var(--radius-2);
padding: 14px 14px 12px;
margin: 0;
}
body.avg-trust .av-process-grid .av-figure img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
background: var(--cream);
border-radius: 0;
}
body.avg-trust .av-process-grid .av-figure figcaption {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--hair);
font-family: var(--display);
font-weight: 700;
font-size: 15px;
color: var(--ink);
letter-spacing: -0.01em;
line-height: 1.3;
}
body.avg-trust .av-process-grid .av-figure figcaption strong { font-weight: 700; }
/* ---------------------------------------------------------------
* 3. Policy page components — TOC, commitments, source-badges grid.
* (§2.6)
* --------------------------------------------------------------- */
body.avg-trust .av-policy-toc {
background: var(--cream);
border-top: 1.5px solid var(--rule);
border-bottom: 1.5px solid var(--rule);
padding: 26px 28px;
margin: 32px 0 48px;
}
body.avg-trust .av-policy-toc__title {
font-family: var(--meta);
font-weight: var(--meta-w);
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 14px;
}
body.avg-trust .av-policy-toc ol,
body.avg-trust .av-policy-toc ul {
list-style: none;
margin: 0;
padding: 0;
counter-reset: policy-toc;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
@media (min-width: 900px) {
body.avg-trust .av-policy-toc ol,
body.avg-trust .av-policy-toc ul { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
body.avg-trust .av-policy-toc li {
counter-increment: policy-toc;
padding-left: 40px;
position: relative;
line-height: 1.4;
}
body.avg-trust .av-policy-toc li::before {
content: counter(policy-toc, decimal-leading-zero);
position: absolute;
left: 0;
top: 0;
font-family: var(--meta);
font-weight: var(--meta-w);
font-size: 12px;
color: var(--ink-3);
letter-spacing: 0.08em;
}
body.avg-trust .av-policy-toc a { color: var(--ink); text-decoration: none; }
body.avg-trust .av-policy-toc a:hover { color: var(--coral-deep); text-decoration: underline; }
/* Commitment callout — coral left rule, cream fill */
body.avg-trust .av-commitment {
background: var(--cream);
border: 1.5px solid var(--hair);
border-left: 6px solid var(--coral);
padding: 22px 26px;
margin: 32px 0;
border-radius: var(--radius-2);
}
body.avg-trust .av-commitment__label {
display: inline-block;
font-family: var(--meta);
font-weight: var(--meta-w);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--coral-deep);
margin: 0 0 8px;
}
body.avg-trust .av-commitment__statement,
body.avg-trust .av-commitment strong {
font-family: var(--display);
font-weight: 700;
font-size: 17px;
line-height: 1.4;
color: var(--ink);
}
body.avg-trust .av-commitment__why { color: var(--ink-3); font-size: 14px; }
/* Source-badges grid */
body.avg-trust .av-source-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 28px 0 40px;
}
@media (max-width: 900px) { body.avg-trust .av-source-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { body.avg-trust .av-source-grid { grid-template-columns: 1fr; } }
body.avg-trust .av-source-tile {
background: var(--cream);
border: 1.5px solid var(--hair);
border-top: 3px solid var(--forest-deep);
border-radius: var(--radius-2);
padding: 18px 20px;
}
/* Status pill — "Updated {date}" style */
body.avg-trust .av-status-pill,
body.avg-trust .status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--page);
border: 1px solid var(--hair);
border-radius: var(--radius-round);
padding: 4px 12px;
font-family: var(--meta);
font-weight: var(--meta-w);
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-3);
}
/* ---------------------------------------------------------------
* 4. Contact page — hero + contact-method cards
* (§2.7)
* --------------------------------------------------------------- */
body.avg-trust .av-contact-hero {
background: var(--cream);
border: 1.5px solid var(--hair);
border-radius: var(--radius-2);
padding: 32px;
margin: 0 0 40px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 32px;
}
@media (max-width: 900px) {
body.avg-trust .av-contact-hero { grid-template-columns: 1fr; gap: 24px; }
}
body.avg-trust .av-contact-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin: 24px 0 40px;
}
@media (max-width: 1024px) { body.avg-trust .av-contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { body.avg-trust .av-contact-grid { grid-template-columns: 1fr; } }
body.avg-trust .av-contact-card {
background: var(--page);
border: 1.5px solid var(--hair);
border-radius: var(--radius-2);
padding: 22px;
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color .15s;
}
body.avg-trust .av-contact-card:hover { border-color: var(--forest-deep); }
body.avg-trust .av-contact-card h4,
body.avg-trust .av-contact-card__name {
font-family: var(--display);
font-weight: 800;
font-size: 17px;
color: var(--ink);
margin: 0;
}
body.avg-trust .av-contact-card__cta,
body.avg-trust .av-contact-card a {
font-family: var(--body);
font-weight: 600;
font-size: 15px;
color: var(--coral-deep);
text-decoration: none;
margin-top: auto;
}
body.avg-trust .av-contact-card a:hover { text-decoration: underline; }
/* ---------------------------------------------------------------
* 5. Money page — service hero, disclosure, glance, emergency,
* provider cards, tables, checklist, FAQ, endplate.
* (§2.5)
* --------------------------------------------------------------- */
/* Wrap the money page in .wrap padding so the hero doesn't touch the
viewport edges under the chrome. */
body.avg-money .non-VC-page {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px 40px;
}
@media (max-width: 640px) { body.avg-money .non-VC-page { padding: 0 20px 24px; } }
body.avg-money .non-VC-page .row { margin: 0; padding: 0; }
/* Service hero — cream ground, ruled border, 2/3 + 1/3 grid */
body.avg-money .av-service-hero {
background: var(--cream);
border: 1.5px solid var(--hair);
border-radius: var(--radius-2);
padding: 40px;
margin: 24px 0 40px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 32px;
align-items: start;
}
@media (max-width: 900px) {
body.avg-money .av-service-hero {
grid-template-columns: 1fr;
padding: 28px 20px;
}
}
body.avg-money .av-service-hero__eyebrow {
font-family: var(--meta);
font-weight: var(--meta-w);
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--forest-deep);
margin: 0 0 12px;
position: relative;
padding-bottom: 8px;
}
body.avg-money .av-service-hero__eyebrow::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 40px; height: 2px;
background: var(--coral);
}
body.avg-money .av-service-hero__title {
font-family: var(--display);
font-weight: 800;
font-size: 42px;
line-height: 1.08;
letter-spacing: -0.026em;
color: var(--ink);
margin: 0 0 16px;
}
@media (max-width: 640px) { body.avg-money .av-service-hero__title { font-size: 30px; } }
body.avg-money .av-service-hero__promise {
font-family: var(--body);
font-weight: 500;
font-size: 18px;
line-height: 1.55;
color: var(--ink-2);
margin: 0 0 16px;
}
body.avg-money .av-service-hero__trust {
list-style: none;
margin: 0 0 12px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
body.avg-money .av-service-hero__trust li {
background: var(--page);
border: 1.5px solid var(--hair);
border-radius: var(--radius-round);
padding: 6px 14px;
font-family: var(--meta);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.06em;
color: var(--ink-2);
}
body.avg-money .av-service-hero__attrib {
font-family: var(--body);
font-style: italic;
font-size: 13px;
color: var(--ink-3);
margin: 8px 0 0;
}
/* Affiliate disclosure block (top-of-page + inline) */
body.avg-money .av-disclosure {
background: var(--sun-tint);
border: 1.5px solid var(--sun-deep);
border-radius: var(--radius-2);
padding: 14px 18px;
margin: 0 0 32px;
font-family: var(--body);
font-style: italic;
font-size: 14px;
line-height: 1.55;
color: var(--ink);
}
body.avg-money .av-disclosure a { color: var(--forest-deep); font-weight: 600; }
/* Trust-subtlety §4 (2026-08-24, Option B): one-line affiliate disclosure
directly above the provider comparison cluster. FTC "clear and conspicuous"
is satisfied by adjacency (no scroll gap between disclosure and click
target) — the loud yellow banner form is retired. Muted italic, no fill,
contrast still passes WCAG AA per legal floor. Source:
reviews/trust-subtlety-strings.md §4, reviews/trust-signal-subtlety-seo.md
§3a + §4. */
body.avg-money .av-affiliate-line {
margin: 20px 0 8px;
padding: 0;
background: transparent;
border: 0;
font-family: var(--body);
font-style: italic;
font-size: 14px;
line-height: 1.55;
color: var(--ink-3);
max-width: 78ch;
}
/* Short-answer glance card */
body.avg-money .av-glance {
background: var(--forest-tint);
border: 1.5px solid var(--forest-deep);
border-radius: var(--radius-2);
padding: 18px 22px;
margin: 0 0 24px;
}
body.avg-money .av-glance strong {
display: block;
font-family: var(--meta);
font-weight: var(--meta-w);
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--forest-deep);
margin: 0 0 6px;
}
body.avg-money .av-glance p { margin: 0; font-size: 15px; color: var(--ink); font-weight: 500; }
/* Emergency callout — solid coral, the site's ONE non-severity-chip solid */
body.avg-money .av-emergency {
background: var(--coral);
color: #ffffff;
border: 1.5px solid var(--coral-deep);
border-left: 6px solid var(--coral-deep);
border-radius: var(--radius-2);
padding: 22px 26px;
margin: 32px 0;
display: flex;
gap: 18px;
align-items: flex-start;
}
body.avg-money .av-emergency__heading {
font-family: var(--display);
font-weight: 800;
font-size: 22px;
color: #ffffff;
margin: 0 0 10px;
letter-spacing: -0.01em;
}
body.avg-money .av-emergency ul { margin: 0; padding-left: 20px; }
body.avg-money .av-emergency li { color: #ffffff; margin: 4px 0; }
body.avg-money .av-emergency a { color: #ffffff; text-decoration: underline; font-weight: 600; }
body.avg-money .av-emergency__outbound { margin: 12px 0 0; color: #ffffff; }
/* Provider cards — G borders, sun top border for primary */
body.avg-money .av-provider-card {
background: var(--page);
border: 1.5px solid var(--hair);
border-radius: var(--radius-2);
padding: 28px 30px;
margin: 20px 0 24px;
position: relative;
}
body.avg-money .av-provider-card--primary { border-top: 4px solid var(--sun); }
body.avg-money .av-provider-card--comparison { border-top: 4px solid var(--ink-3); }
body.avg-money .av-provider-card__tier {
display: inline-block;
font-family: var(--meta);
font-weight: var(--meta-w);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: var(--radius-1);
margin: 0 0 12px;
}
body.avg-money .av-provider-card--primary .av-provider-card__tier {
background: var(--sun-tint);
color: var(--sun-deep);
}
body.avg-money .av-provider-card--comparison .av-provider-card__tier {
background: var(--cream);
color: var(--ink-3);
}
body.avg-money .av-provider-card__name {
font-family: var(--display);
font-weight: 800;
font-size: 26px;
color: var(--ink);
margin: 0 0 4px;
letter-spacing: -0.02em;
}
body.avg-money .av-provider-card__tag {
font-family: var(--body);
font-size: 15px;
color: var(--ink-2);
margin: 0 0 20px;
}
body.avg-money .av-provider-card__facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 14px 16px;
margin: 16px 0;
background: var(--cream);
border: 1.5px solid var(--hair);
border-radius: var(--radius-1);
}
@media (max-width: 640px) { body.avg-money .av-provider-card__facts { grid-template-columns: 1fr; } }
body.avg-money .av-provider-card__fact-label {
display: block;
font-family: var(--meta);
font-weight: var(--meta-w);
font-size: 10.5px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 2px;
}
body.avg-money .av-provider-card__fact-value {
display: block;
font-family: var(--display);
font-weight: 700;
font-size: 15px;
color: var(--ink);
}
body.avg-money .av-provider-card__what {
font-family: var(--meta);
font-weight: var(--meta-w);
font-size: 12px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-3);
margin: 16px 0 8px;
}
body.avg-money .av-provider-card__bullets { padding-left: 22px; margin: 0 0 16px; }
body.avg-money .av-provider-card__bullets li { margin: 6px 0; color: var(--ink); }
body.avg-money .av-provider-card__caveat {
font-family: var(--body);
font-style: italic;
font-size: 14px;
color: var(--ink-3);
margin: 16px 0;
padding: 12px 16px;
background: var(--cream);
border-left: 3px solid var(--sun);
}
body.avg-money .av-provider-card__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-top: 20px;
}
body.avg-money .av-provider-card__cta {
background: var(--ink);
color: var(--paper);
padding: 12px 22px;
border-radius: var(--radius-2);
font-family: var(--display);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.01em;
text-decoration: none;
transition: background .15s;
}
body.avg-money .av-provider-card__cta:hover { background: var(--coral); color: #ffffff; }
body.avg-money .av-provider-card__more {
color: var(--coral-deep);
font-family: var(--body);
font-weight: 600;
font-size: 14px;
text-decoration: none;
border-bottom: 1px dotted var(--coral);
}
body.avg-money .av-provider-card__more:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* Table wrapper — G rules, cream headers */
body.avg-money .av-table-scroll { overflow-x: auto; margin: 20px 0 28px; border: 1.5px solid var(--hair); border-radius: var(--radius-2); }
body.avg-money .av-table-scroll table { min-width: 720px; width: 100%; border-collapse: collapse; }
body.avg-money .av-table-scroll th {
background: var(--cream);
color: var(--ink);
font-family: var(--display);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: left;
padding: 12px 14px;
border-bottom: 1.5px solid var(--rule);
}
body.avg-money .av-table-scroll td {
padding: 12px 14px;
border-bottom: 1px solid var(--hair);
font-family: var(--body);
font-size: 15px;
color: var(--ink);
vertical-align: top;
}
body.avg-money .av-table-scroll tbody tr:nth-child(even) { background: #FDFBF3; }
body.avg-money .av-table-scroll tbody tr:last-child td { border-bottom: 0; }
/* Skip-the-televet checklist */
body.avg-money .av-checklist {
background: var(--cream);
border: 1.5px solid var(--hair);
border-left: 4px solid var(--coral);
border-radius: var(--radius-2);
padding: 24px 28px;
margin: 28px 0;
}
body.avg-money .av-checklist__eyebrow {
font-family: var(--meta);
font-weight: var(--meta-w);
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--coral-deep);
margin: 0 0 12px;
}
body.avg-money .av-checklist__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 900px) { body.avg-money .av-checklist__list { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
body.avg-money .av-checklist__list li { padding-left: 22px; position: relative; color: var(--ink); }
body.avg-money .av-checklist__list li::before {
content: "";
position: absolute; left: 0; top: 8px;
width: 10px; height: 10px;
background: var(--coral);
border-radius: 2px;
}
body.avg-money .av-checklist__list .icon-alert { display: none; }
/* FAQ accordion — G rules, coral open marker (TEXT preserved; presentation only) */
body.avg-money .av-faq { margin: 40px 0; }
body.avg-money .av-faq details {
border-top: 1px solid var(--hair);
padding: 18px 0;
}
body.avg-money .av-faq details:last-of-type { border-bottom: 1px solid var(--hair); }
body.avg-money .av-faq summary {
list-style: none;
cursor: pointer;
font-family: var(--display);
font-weight: 700;
font-size: 17px;
color: var(--ink);
padding-right: 32px;
position: relative;
}
body.avg-money .av-faq summary::-webkit-details-marker { display: none; }
body.avg-money .av-faq summary::after {
content: "+";
position: absolute;
right: 4px;
top: -2px;
font-family: var(--display);
font-size: 24px;
font-weight: 700;
color: var(--coral);
transition: transform .15s;
}
body.avg-money .av-faq details[open] summary::after { content: "−"; }
body.avg-money .av-faq summary:hover { color: var(--coral-deep); }
body.avg-money .av-faq details p { margin: 12px 0 0; color: var(--ink-2); }
/* ---------------------------------------------------------------
* 6. Category archives — full-bleed hero (§2.9 C1) + hub-hue banner
* --------------------------------------------------------------- */
/* Make the wrapping row not container-restrict the band. The band itself
then breaks out to viewport width via calc-based negative margin. Foundation's
.row default sets max-width; on the category scope we want the whole main
column to be viewport-wide so the hero band can span edge-to-edge. */
body.avg-cat { overflow-x: hidden; }
body.avg-cat #wrapper { overflow-x: hidden; }
body.avg-cat [role="main"] { overflow-x: hidden; }
body.avg-cat .av-category-row {
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
width: 100%;
}
body.avg-cat .av-category-row > .small-12.columns {
padding: 0 !important;
max-width: none !important;
width: 100%;
}
/* Full-bleed hub-hued hero band. Uses --hub / --hub-deep from data-hub. */
body.avg-cat .av-category-band {
background: linear-gradient(160deg, var(--hub-deep) 0%, var(--hub) 100%);
color: #ffffff;
padding: 68px 32px 76px;
margin: 0 0 40px;
position: relative;
/* Break out of any container to viewport edges */
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
border: 0;
}
@media (max-width: 640px) {
body.avg-cat .av-category-band { padding: 44px 20px 52px; }
}
body.avg-cat .av-category-band__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 20px;
align-items: center;
}
@media (min-width: 1024px) {
body.avg-cat .av-category-band__inner { grid-template-columns: 1.4fr .6fr; gap: 48px; }
}
body.avg-cat .av-category-band__text {
color: #ffffff;
display: flex; flex-direction: column; gap: 8px;
}
body.avg-cat .av-category-band__breadcrumb ol { color: rgba(255,255,255,0.85); font-size: 12px; }
body.avg-cat .av-category-band__breadcrumb a { color: rgba(255,255,255,0.85); }
body.avg-cat .av-category-band__breadcrumb a:hover { color: #ffffff; }
body.avg-cat .av-category-band__breadcrumb .av-crumb-sep { color: rgba(255,255,255,0.55); }
body.avg-cat .av-category-band__breadcrumb [aria-current="page"] { color: #ffffff; font-weight: 600; }
body.avg-cat .av-category-band__eyebrow {
font-family: var(--meta);
font-weight: var(--meta-w);
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #ffffff;
opacity: 0.9;
}
body.avg-cat .av-category-band__title {
font-family: var(--display);
font-weight: 800;
font-size: 48px;
line-height: 1.05;
letter-spacing: -0.026em;
color: #ffffff;
margin: 6px 0 8px;
}
@media (min-width: 1024px) { body.avg-cat .av-category-band__title { font-size: 60px; } }
@media (max-width: 640px) { body.avg-cat .av-category-band__title { font-size: 34px; } }
body.avg-cat .av-category-band__count {
color: rgba(255,255,255,0.85);
font-family: var(--meta);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.10em;
text-transform: uppercase;
}
body.avg-cat .av-category-band__standfirst {
color: #ffffff;
opacity: 0.92;
font-family: var(--body);
font-weight: 500;
font-size: 18px;
line-height: 1.5;
max-width: 640px;
margin: 10px 0 0;
}
body.avg-cat .av-category-band__meta {
color: rgba(255,255,255,0.75);
font-size: 12px;
margin-top: 14px;
letter-spacing: 0.06em;
}
body.avg-cat .av-category-band__meta-curated { color: #ffffff; font-weight: 600; }
/* Right-side photo / icon device — hero-figure treatment; collapses when
no asset is present (owner C1 collapse rule). */
body.avg-cat .av-category-band__thumb {
display: none;
background-color: rgba(255,255,255,0.06);
background-size: cover;
background-position: center;
aspect-ratio: 4 / 3;
border-radius: var(--radius-2);
border: 6px solid var(--page);
box-shadow: 0 0 0 1px var(--rule);
}
@media (min-width: 1024px) {
body.avg-cat .av-category-band--photo .av-category-band__thumb { display: block; }
}
body.avg-cat .av-category-band__icon-wrap {
display: none;
}
/* --icon variant collapses gracefully: hero renders with text only + a
discrete decorative badge in the corner. */
body.avg-cat .av-category-band--icon .av-category-band__inner { grid-template-columns: 1fr; }
body.avg-cat .av-category-band--icon .av-category-band__icon-wrap {
display: none; /* HIDE the parent theme's iconfont glyphs — decorative, not real */
}
/* Wave 6 (2026-08-20) — W6 Ducks band cleanup.
The collapse rule above turns inner into 1fr and hides the icon-wrap,
but text is left-flush inside a 1280px column so short terms (Ducks,
Parasites, Conures) leave the right ~60% visually empty and the band
reads as an un-collapsed half-empty two-column layout. Fix: cap the
text block, center it inside the band, and reduce vertical padding
so the collapsed hero feels intentional at both widths.
Same rules apply to all --icon variants (parasites/conures/ducks). */
body.avg-cat .av-category-band--icon {
padding: 52px 32px 56px;
}
@media (max-width: 640px) {
body.avg-cat .av-category-band--icon { padding: 40px 20px 44px; }
}
body.avg-cat .av-category-band--icon .av-category-band__inner {
justify-items: center;
}
body.avg-cat .av-category-band--icon .av-category-band__text {
max-width: 780px;
width: 100%;
text-align: center;
align-items: center;
}
body.avg-cat .av-category-band--icon .av-category-band__breadcrumb ol {
justify-content: center;
}
body.avg-cat .av-category-band--icon .av-category-band__standfirst {
margin-inline: auto;
}
/* ================================================================
Wave 6 (2026-08-20) — C2 hub-section bucketing on term pages.
Renders when the category's posts span two or more sub-hubs; a
single-bucket term still renders the flat grid unchanged.
§2.9 point 3 — Getting started / Day-to-day care / Health &
illness / Vet Corner. Each bucket header carries a hub-hue
accent bar left of its title so bucket identity reads at a
glance without breaking the term's parent hub color scheme.
================================================================ */
body.avg-cat .av-category-buckets {
display: flex;
flex-direction: column;
gap: 48px;
margin: 8px 0 8px;
}
body.avg-cat .av-category-bucket {
background: transparent;
padding: 0;
}
body.avg-cat .av-category-bucket__header {
position: relative;
padding: 6px 0 14px 22px;
margin: 0 0 20px;
border-bottom: 1.5px solid var(--hair);
}
body.avg-cat .av-category-bucket__header::before {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 14px;
width: 4px;
border-radius: 2px;
background: var(--coral, #d05e5e); /* default — overridden per-tier below */
}
body.avg-cat .av-category-bucket[data-bucket-tier="basics"] .av-category-bucket__header::before { background: var(--sky, #4aa8d8); }
body.avg-cat .av-category-bucket[data-bucket-tier="care"] .av-category-bucket__header::before { background: var(--sun, #f4b942); }
body.avg-cat .av-category-bucket[data-bucket-tier="health"] .av-category-bucket__header::before { background: var(--coral, #d05e5e); }
body.avg-cat .av-category-bucket[data-bucket-tier="vet"] .av-category-bucket__header::before { background: var(--forest, #2f6b4a); }
body.avg-cat .av-category-bucket__title {
font-family: var(--display);
font-weight: 800;
font-size: 22px;
line-height: 1.15;
letter-spacing: -0.014em;
color: var(--ink);
margin: 0;
}
@media (min-width: 1024px) {
body.avg-cat .av-category-bucket__title { font-size: 26px; }
}
body.avg-cat .av-category-bucket__grid {
/* Reuses .av-category-grid rules already defined earlier in this
sheet — no per-bucket overrides needed. */
}
body.avg-cat .av-category-grid-wrap--bucketed {
/* Wrapper: give bucketed layout a bit more top breathing room
from the intro block since bucket headers add structural weight. */
padding-top: 8px;
}
/* Intro block below the hero */
body.avg-cat .av-category-intro {
background: transparent;
margin: 0 0 40px;
}
body.avg-cat .av-category-intro__inner {
max-width: 1280px;
margin: 0 auto;
padding: 8px 32px 0;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
}
@media (max-width: 900px) {
body.avg-cat .av-category-intro__inner { grid-template-columns: 1fr; padding: 8px 20px 0; gap: 24px; }
}
body.avg-cat .av-category-intro__prose { font-size: 17px; line-height: 1.6; color: var(--ink); }
body.avg-cat .av-category-intro__start {
background: var(--cream);
border: 1.5px solid var(--hair);
border-top: 4px solid var(--hub);
padding: 22px 24px;
border-radius: var(--radius-2);
}
body.avg-cat .av-category-intro__start-eyebrow {
font-family: var(--meta); font-weight: var(--meta-w); font-size: 11px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--hub-deep);
margin: 0 0 8px;
}
body.avg-cat .av-category-intro__start-title { font-family: var(--display); font-weight: 800; font-size: 18px; margin: 0 0 8px; color: var(--ink); }
body.avg-cat .av-category-intro__start-copy { font-size: 14px; color: var(--ink-2); margin: 0 0 12px; }
body.avg-cat .av-category-intro__start-link {
display: inline-block;
font-family: var(--display); font-weight: 700; font-size: 14px;
color: var(--coral-deep); text-decoration: none;
border-bottom: 2px solid var(--coral);
}
body.avg-cat .av-category-intro__start-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* Sub-terms chips */
body.avg-cat .av-category-subterms { margin-top: 24px; }
body.avg-cat .av-category-subterms__label {
font-family: var(--meta); font-weight: var(--meta-w); font-size: 11px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
margin: 0 0 10px;
}
body.avg-cat .av-category-subterms__chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.avg-cat .av-category-subterms__chip {
background: var(--hub-tint);
color: var(--hub-deep);
border: 1px solid var(--hub);
padding: 6px 14px;
border-radius: var(--radius-round);
font-family: var(--body); font-weight: 600; font-size: 13px;
text-decoration: none;
}
body.avg-cat .av-category-subterms__chip:hover { background: var(--hub); color: #ffffff; }
/* Grid + cards */
body.avg-cat .av-category-grid-wrap {
max-width: 1280px;
margin: 0 auto 40px;
padding: 0 32px;
}
@media (max-width: 640px) { body.avg-cat .av-category-grid-wrap { padding: 0 20px; } }
body.avg-cat .av-category-grid {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
}
@media (min-width: 640px) { body.avg-cat .av-category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { body.avg-cat .av-category-grid { grid-template-columns: repeat(3, 1fr); } }
body.avg-cat .av-category-card {
background: var(--page);
border: 1.5px solid var(--rule);
border-radius: var(--radius-0);
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color .15s, transform .15s;
}
body.avg-cat .av-category-card:hover { border-color: var(--hub-deep); }
body.avg-cat .av-category-card__thumb-link { display: block; aspect-ratio: 16 / 9; background: var(--cream); overflow: hidden; }
body.avg-cat .av-category-card__thumb-link img { width: 100%; height: 100%; object-fit: cover; }
body.avg-cat .av-category-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
body.avg-cat .av-category-card__badge {
display: inline-block; align-self: flex-start;
font-family: var(--meta); font-weight: var(--meta-w); font-size: 10.5px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--hub-deep);
text-decoration: none;
padding-bottom: 2px;
border-bottom: 2px solid var(--coral);
}
body.avg-cat .av-category-card__title {
font-family: var(--display); font-weight: 800; font-size: 20px;
line-height: 1.2; color: var(--ink); margin: 4px 0 0;
letter-spacing: -0.02em;
}
body.avg-cat .av-category-card__title a { color: inherit; text-decoration: none; }
body.avg-cat .av-category-card__title a:hover { color: var(--coral-deep); }
body.avg-cat .av-category-card__excerpt { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 4px 0 0; }
body.avg-cat .av-pagination {
display: flex; justify-content: center; gap: 8px;
margin: 32px 0 40px;
}
body.avg-cat .av-pagination a,
body.avg-cat .av-pagination span {
padding: 8px 14px;
font-family: var(--meta); font-weight: 600; font-size: 13px;
color: var(--ink); text-decoration: none;
border: 1.5px solid var(--hair);
background: var(--page);
border-radius: var(--radius-2);
}
body.avg-cat .av-pagination a:hover { border-color: var(--hub-deep); color: var(--coral-deep); }
body.avg-cat .av-pagination .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* ---------------------------------------------------------------
* 7. Shared endplate — cream ground bridging to the footer, ruled top,
* hub-hue destination cards.
* --------------------------------------------------------------- */
body.avg-trust .av-endplate,
body.avg-money .av-endplate,
body.avg-cat .av-endplate {
background: var(--cream);
border-top: 1.5px solid var(--rule);
padding: 48px 0 56px;
margin: 64px 0 0;
}
body.avg-trust .av-endplate__section,
body.avg-money .av-endplate__section,
body.avg-cat .av-endplate__section {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}
@media (max-width: 640px) {
body.avg-trust .av-endplate__section,
body.avg-money .av-endplate__section,
body.avg-cat .av-endplate__section { padding: 0 20px; }
}
body.avg-trust .av-endplate__eyebrow,
body.avg-money .av-endplate__eyebrow,
body.avg-cat .av-endplate__eyebrow {
font-family: var(--meta); font-weight: var(--meta-w); font-size: 11.5px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
margin: 0 0 10px;
}
body.avg-trust .av-endplate__lead,
body.avg-money .av-endplate__lead,
body.avg-cat .av-endplate__lead {
font-family: var(--body); font-size: 16px; color: var(--ink-2); margin: 0 0 20px;
}
body.avg-trust .av-eop-cards,
body.avg-money .av-eop-cards,
body.avg-cat .av-eop-cards {
display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 900px) {
body.avg-trust .av-eop-cards,
body.avg-money .av-eop-cards,
body.avg-cat .av-eop-cards { grid-template-columns: repeat(3, 1fr); }
}
body.avg-trust .av-eop-card,
body.avg-money .av-eop-card,
body.avg-cat .av-eop-card {
background: var(--page);
border: 1.5px solid var(--rule);
border-radius: var(--radius-0);
padding: 20px 22px;
text-decoration: none;
display: flex; gap: 14px; align-items: flex-start;
transition: border-color .15s;
}
body.avg-trust .av-eop-card:hover,
body.avg-money .av-eop-card:hover,
body.avg-cat .av-eop-card:hover { border-color: var(--coral-deep); }
body.avg-trust .av-eop-card__title,
body.avg-money .av-eop-card__title,
body.avg-cat .av-eop-card__title {
font-family: var(--display); font-weight: 800; font-size: 17px;
color: var(--ink); display: block; margin: 0 0 4px;
}
body.avg-trust .av-eop-card__desc,
body.avg-money .av-eop-card__desc,
body.avg-cat .av-eop-card__desc { font-size: 14px; color: var(--ink-3); }
body.avg-trust .av-endplate__divider,
body.avg-money .av-endplate__divider,
body.avg-cat .av-endplate__divider {
border: 0; border-top: 1px solid var(--hair);
max-width: 1280px; margin: 32px auto; padding: 0 32px;
}
body.avg-trust .av-endplate__trust,
body.avg-money .av-endplate__trust,
body.avg-cat .av-endplate__trust {
font-family: var(--meta); font-weight: 600; font-size: 12px;
letter-spacing: 0.08em; color: var(--ink-3);
}
body.avg-trust .av-endplate__trust a,
body.avg-money .av-endplate__trust a,
body.avg-cat .av-endplate__trust a { color: var(--coral-deep); }
/* ---------------------------------------------------------------
* 8. 404 template — hero panel + 4 hub tiles + search prompt
* (§2.11)
* --------------------------------------------------------------- */
body.avg-404 .av-404 {
max-width: 1280px;
margin: 0 auto;
padding: 40px 32px 64px;
}
@media (max-width: 640px) { body.avg-404 .av-404 { padding: 24px 20px 40px; } }
body.avg-404 .av-404-band {
background: var(--cream);
border: 1.5px solid var(--rule);
border-radius: var(--radius-2);
padding: 48px 40px;
margin: 0 0 40px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
align-items: center;
}
@media (max-width: 900px) { body.avg-404 .av-404-band { grid-template-columns: 1fr; padding: 32px 24px; } }
body.avg-404 .av-404-eyebrow {
font-family: var(--meta); font-weight: var(--meta-w); font-size: 11.5px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-deep);
margin: 0 0 12px;
position: relative; padding-bottom: 8px;
}
body.avg-404 .av-404-eyebrow::after {
content: ""; position: absolute; left: 0; bottom: 0;
width: 40px; height: 2px; background: var(--coral);
}
body.avg-404 .av-404-title {
font-family: var(--display); font-weight: 800;
font-size: 42px; line-height: 1.05;
letter-spacing: -0.026em; color: var(--ink);
margin: 0 0 14px;
}
@media (max-width: 640px) { body.avg-404 .av-404-title { font-size: 30px; } }
body.avg-404 .av-404-desc { font-size: 17px; line-height: 1.55; color: var(--ink-2); margin: 0; }
body.avg-404 .av-404-figure {
background: var(--page);
border: 1.5px solid var(--rule);
border-radius: var(--radius-2);
padding: 20px;
display: flex; align-items: center; justify-content: center;
aspect-ratio: 1 / 1;
max-width: 260px;
margin-left: auto;
}
body.avg-404 .av-404-figure svg { width: 100%; height: auto; color: var(--coral); }
body.avg-404 .av-404-tiles-heading {
font-family: var(--meta); font-weight: var(--meta-w); font-size: 11.5px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
margin: 0 0 14px;
}
body.avg-404 .av-404-tiles {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
margin: 0 0 40px;
}
@media (max-width: 640px) { body.avg-404 .av-404-tiles { grid-template-columns: 1fr; gap: 14px; } }
body.avg-404 .av-404-tile {
display: block;
text-decoration: none;
padding: 28px 26px 32px;
border: 1.5px solid var(--rule);
border-radius: var(--radius-3);
color: #ffffff;
position: relative;
transition: transform .15s;
min-height: 140px;
}
body.avg-404 .av-404-tile:hover { transform: translateY(-2px); }
body.avg-404 .av-404-tile--basics { background: linear-gradient(160deg, var(--sky-deep) 0%, var(--sky) 100%); }
body.avg-404 .av-404-tile--routine { background: linear-gradient(160deg, #C08415 0%, var(--sun) 100%); color: var(--ink); }
body.avg-404 .av-404-tile--health { background: linear-gradient(160deg, var(--coral-deep) 0%, var(--coral) 100%); }
body.avg-404 .av-404-tile--vet { background: linear-gradient(160deg, var(--forest-deep) 0%, var(--forest) 100%); }
body.avg-404 .av-404-tile-eyebrow {
display: block;
font-family: var(--meta); font-weight: var(--meta-w); font-size: 10.5px;
letter-spacing: 0.14em; text-transform: uppercase;
color: inherit; opacity: 0.9;
margin: 0 0 6px;
}
body.avg-404 .av-404-tile-title {
font-family: var(--display); font-weight: 800; font-size: 22px;
line-height: 1.15; letter-spacing: -0.02em; color: inherit;
margin: 0 0 8px;
}
body.avg-404 .av-404-tile-desc { font-family: var(--body); font-size: 14px; color: inherit; opacity: 0.92; margin: 0; }
body.avg-404 .av-404-search {
background: var(--page);
border: 1.5px solid var(--rule);
border-radius: var(--radius-2);
padding: 28px 32px;
margin: 0 0 8px;
}
body.avg-404 .av-404-search-label {
display: block;
font-family: var(--meta); font-weight: var(--meta-w); font-size: 11.5px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
margin: 0 0 12px;
}
body.avg-404 .av-404-search form { display: flex; gap: 10px; }
body.avg-404 .av-404-search input[type="search"] {
flex: 1 1 auto;
background: var(--page); color: var(--ink);
border: 1.5px solid var(--hair);
border-radius: var(--radius-2);
padding: 12px 14px;
font-family: var(--body); font-size: 16px;
}
body.avg-404 .av-404-search input[type="search"]:focus { outline: 3px solid var(--sky-tint); outline-offset: 2px; border-color: var(--ink); }
body.avg-404 .av-404-search button {
background: var(--ink); color: var(--paper);
border: 0; border-radius: var(--radius-2);
padding: 12px 22px;
font-family: var(--display); font-weight: 700; font-size: 14px;
cursor: pointer;
}
body.avg-404 .av-404-search button:hover { background: var(--coral); color: #ffffff; }
/* ---------------------------------------------------------------
* 9. Suppress parent-theme legacy chrome the G language retires on
* trust/money/category/404 (share buttons, prev/next floaters,
* "SEE ALSO" tiles, author-inline blocks, thb sidebar remnants).
* Belt-and-suspenders — the article-g rules already cover articles;
* this coverage extends to the pages this stylesheet ships for.
* --------------------------------------------------------------- */
body.avg-trust .thb-article-nav,
body.avg-money .thb-article-nav,
body.avg-cat .thb-article-nav,
body.avg-404 .thb-article-nav,
body.avg-trust .post.thumbnail-seealso,
body.avg-money .post.thumbnail-seealso,
body.avg-cat .post.thumbnail-seealso,
body.avg-404 .post.thumbnail-seealso,
body.avg-trust .social-button-holder,
body.avg-money .social-button-holder,
body.avg-cat .social-button-holder,
body.avg-404 .social-button-holder,
body.avg-trust .thb-post-title-inline-author,
body.avg-money .thb-post-title-inline-author,
body.avg-cat .thb-post-title-inline-author,
body.avg-404 .thb-post-title-inline-author,
body.avg-trust .thb-sticky-separator,
body.avg-money .thb-sticky-separator,
body.avg-cat .thb-sticky-separator,
body.avg-404 .thb-sticky-separator,
body.avg-trust .comments-area,
body.avg-money .comments-area,
body.avg-cat .comments-area,
body.avg-404 .comments-area {
display: none !important;
}
/* Trust pages' parent theme wraps content in a small-12 medium-9 + sidebar
split; kill the empty medium-3 sidebar column and reclaim the full column
width so structural components (contact grid, process grid, endplate) get
the full page width to work with. Prose blocks get their own readable
max-width below. */
body.avg-trust .non-VC-page .small-12.medium-3.columns.sidebar { display: none !important; }
body.avg-trust .non-VC-page .small-12.medium-9.sidebar-content.columns,
body.avg-trust .non-VC-page .small-12.medium-9.columns,
body.avg-trust .non-VC-page .small-12.columns {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
/* Parent .row is display:flex; force flex-basis 100% so the column
takes the full row width even when float:none removes float sizing. */
flex: 1 1 100% !important;
flex-basis: 100% !important;
}
/* Also normalize .row so flex-wrap doesn't collapse the single column to 0 */
body.avg-trust .non-VC-page .row {
flex-wrap: wrap !important;
max-width: 100% !important;
width: 100% !important;
}
/* Constrain prose (paragraphs, lists, blockquotes, images inline in prose)
to a comfortable 780px reading measure — but leave structural components
full width. */
body.avg-trust .no-vc > p,
body.avg-trust .no-vc > ul,
body.avg-trust .no-vc > ol,
body.avg-trust .no-vc > h2,
body.avg-trust .no-vc > h3,
body.avg-trust .no-vc > h4,
body.avg-trust .no-vc > blockquote,
body.avg-trust .no-vc > figure.wp-block-image,
body.avg-trust .no-vc > .av-jumplist,
body.avg-trust .no-vc > .av-policy-toc,
body.avg-trust .no-vc > .av-commitment,
body.avg-trust .no-vc > .av-founder-portrait,
body.avg-trust .no-vc > .av-pullquote {
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
/* Process grid, contact grid, source-badges grid, endplate, hero bands
— allow full column width (max 1200 for hero bands / grids). */
body.avg-trust .no-vc > .av-process-grid,
body.avg-trust .no-vc > .av-source-grid,
body.avg-trust .no-vc > .av-contact-grid,
body.avg-trust .no-vc > .av-contact-hero,
body.avg-trust .no-vc > .av-policy-hero,
body.avg-trust .no-vc > .av-service-hero {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* Kill the pre-existing .av-endplate 100vw viewport breakout on our scopes —
the parent theme's Foundation .row already contains the column awkwardly
under our width overrides, and the 100vw trick misaligns. Use a plain
full-column-width endplate with an internal max-width instead. */
body.avg-trust .av-endplate,
body.avg-money .av-endplate,
body.avg-cat .av-endplate,
body.avg-404 .av-endplate {
width: 100%;
position: static;
left: auto; right: auto;
margin-left: 0;
margin-right: 0;
}
/* Money page — same treatment: full column width for content */
body.avg-money .non-VC-page .small-12.columns,
body.avg-money .non-VC-page .small-12.medium-9.sidebar-content.columns {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
flex: 1 1 100% !important;
flex-basis: 100% !important;
}
body.avg-money .non-VC-page .row {
flex-wrap: wrap !important;
max-width: 100% !important;
width: 100% !important;
}
/* ---------------------------------------------------------------
* 10. G-marker sentinels — used by scripts/av-invariants.sh to prove
* these page types shipped with pages-g.css active.
* --------------------------------------------------------------- */
body.avg-trust::before,
body.avg-money::before,
body.avg-cat::before,
body.avg-404::before {
content: "";
display: block;
height: 0;
overflow: hidden;
/* Named marker so grep asserts pages-g is applied.
Do NOT change these strings without updating av-invariants.sh. */
}
body.avg-trust { --avg-scope: "pages-g-trust"; }
body.avg-money { --avg-scope: "pages-g-money"; }
body.avg-cat { --avg-scope: "pages-g-cat"; }
body.avg-404 { --avg-scope: "pages-g-404"; }
/* ================================================================
BLOCKER 3 fix (2026-08-20) — Money page mobile overflow.
UX C1: 15 elements on /talk-to-an-avian-vet/ render 660-742px
wide inside a 375px viewport and get silently clipped (body has
overflow-x: hidden; users cannot even scroll to reveal).
Root cause: parent-theme .row / .non-VC-page / .no-vc / .columns
wrappers hold a fixed grid width; the money-page components inside
inherit that width and never collapse below their desktop grid
footprint. Fix: hard-cap every money-page wrapper to 100% at
≤900px, allow tables to scroll inside their own overflow-x, and
break H1/H2 long words when they would otherwise overflow.
================================================================ */
@media (max-width: 900px) {
body.avg-money .non-VC-page,
body.avg-money .non-VC-page .row,
body.avg-money .non-VC-page .columns,
body.avg-money .non-VC-page .small-12,
body.avg-money .non-VC-page .no-vc,
body.avg-money .av-service-hero,
body.avg-money .av-service-hero__body,
body.avg-money .av-service-hero__aside,
body.avg-money .av-emergency,
body.avg-money .av-emergency__body,
body.avg-money .av-provider-card,
body.avg-money .av-checklist,
body.avg-money .av-jumplist,
body.avg-money .av-disclosure,
body.avg-money .av-glance,
body.avg-money .av-pullquote {
max-width: 100% !important;
min-width: 0 !important;
width: auto !important;
box-sizing: border-box;
}
body.avg-money .non-VC-page,
body.avg-money .non-VC-page > .row {
padding-left: var(--wrap-gutter-mb) !important;
padding-right: var(--wrap-gutter-mb) !important;
}
body.avg-money .av-table-scroll {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
body.avg-money .av-table-scroll table {
min-width: 560px;
}
body.avg-money h1,
body.avg-money h2,
body.avg-money h3,
body.avg-money h4 {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
/* H1 in the service hero — shrink so long-word tokens fit */
body.avg-money .av-service-hero__title {
font-size: 28px !important;
line-height: 1.12;
}
body.avg-money .av-provider-card__name {
font-size: 22px;
}
body.avg-money .av-emergency {
flex-direction: column;
gap: 8px;
}
body.avg-money .av-emergency__heading {
font-size: 20px;
}
}
/* ================================================================
BLOCKER 1 fix (2026-08-20) — Tighten the body-scope anchor
re-color to CONTENT scopes only. The previous rule
body.avg-trust a, body.avg-money a, ... { color: var(--coral-deep); }
was cascading into header/footer/nav chrome anchors and turning
them into red-on-black. Restrict to actual content containers.
Chrome-g.css re-asserts the correct chrome colors independently
(belt-and-braces); this scope-tighten fixes the root cause.
================================================================ */
body.avg-trust .non-VC-page a,
body.avg-money .non-VC-page a,
body.avg-cat .non-VC-page a,
body.avg-404 .av-404 a,
body.avg-404 .av-404 a:link,
body.avg-404 .av-404 a:visited {
/* Restated so specificity now names the container — the earlier
`body.avg-* a` rule stays in the file for backwards-compat but
the chrome guardrails in chrome-g.css beat it for chrome. */
color: var(--coral-deep);
}
body.avg-trust .non-VC-page a:hover,
body.avg-money .non-VC-page a:hover,
body.avg-cat .non-VC-page a:hover,
body.avg-404 .av-404 a:hover {
color: var(--ink);
}
/* ================================================================
MAJOR 6 (Wave 6 full parity — 2026-08-20) — About page §2.8.
Raises /about/ to the Editorial-Policy / Medical-Disclaimer
sibling volume via a hero band, two-column body with
portrait sidecard, styled reviewer-pending tile, and
designed section rhythm. All CSS-only — post_content text
is not changed (text-integrity law; content agent owns copy).
Page id: 207 (dev + staging). Prior draft targeted 1268 in
error and did nothing; this block replaces it.
================================================================ */
/* --- Hero band ---------------------------------------------------
The parent theme renders `…
`
in its own column above the content column. We paint that column
as a full-content-width cream hero band with a coral hairline
sig, matching the .av-policy-hero visual on Editorial Policy. */
body.page-id-207.avg-trust .page-title {
background: var(--cream);
padding: 56px 32px 44px;
margin: 0 0 0;
border-bottom: 1.5px solid var(--rule);
text-align: left;
position: relative;
}
body.page-id-207.avg-trust .page-title::before {
content: "";
display: block;
width: 40px;
height: 3px;
background: var(--coral);
margin: 0 auto 18px;
}
body.page-id-207.avg-trust .page-title h1 {
font-family: var(--display);
font-weight: 800;
font-size: 54px;
line-height: 1.05;
letter-spacing: -0.026em;
color: var(--ink);
margin: 0;
text-align: center;
}
@media (max-width: 640px) {
body.page-id-207.avg-trust .page-title { padding: 36px 20px 28px; }
body.page-id-207.avg-trust .page-title h1 { font-size: 34px; }
body.page-id-207.avg-trust .page-title::before { margin-bottom: 14px; }
}
/* --- Founder portrait: framed sidecard ---------------------------
Style the existing .av-founder-portrait figure as a paper-framed
.hero-figure-equivalent, echoing the treatment used on Editorial
Policy's illustration (paper padding + 1.5px rule border). At
desktop, the two-column grid below places this at the top of the
right sidecard column. */
body.page-id-207.avg-trust .av-founder-portrait {
background: var(--paper);
border: 1.5px solid var(--rule);
padding: 10px;
margin: 32px auto 24px;
max-width: 300px;
box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
body.page-id-207.avg-trust .av-founder-portrait img {
display: block;
width: 100%;
height: auto;
max-width: 280px;
margin: 0 auto;
border-radius: 50%;
}
/* --- Two-column body at desktop ---------------------------------
Turn .no-vc into a CSS grid so most content flows in a wide left
reading column, while a narrower right column carries the
portrait sidecard + the jumplist. Below ≥900px, everything
stacks flat. Each rule is bounded so `grid-auto-flow: dense`
packs the reading column contiguously.
Grid ordering (right column, top → bottom):
1. .av-founder-portrait (was already first child)
2. .av-jumplist (styled as policy-toc sidecard)
Reading column takes everything else. */
@media (min-width: 900px) {
body.page-id-207.avg-trust .no-vc {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
column-gap: 48px;
align-items: start;
}
body.page-id-207.avg-trust .no-vc > * {
grid-column: 1;
min-width: 0;
}
body.page-id-207.avg-trust .no-vc > .av-founder-portrait {
grid-column: 2;
grid-row: 1;
margin-top: 32px;
}
body.page-id-207.avg-trust .no-vc > .av-jumplist {
grid-column: 2;
margin-top: 8px;
}
}
/* --- Section rhythm: designed headers ----------------------
Match the editorial-policy visual: top hairline rule, coral
pip mark, larger tracked size. */
body.page-id-207.avg-trust .no-vc > h2 {
margin-top: 56px;
padding-top: 28px;
border-top: 1.5px solid var(--hair);
font-family: var(--display);
font-weight: 800;
font-size: 32px;
line-height: 1.15;
letter-spacing: -0.014em;
color: var(--ink);
position: relative;
padding-left: 24px;
}
body.page-id-207.avg-trust .no-vc > h2::before {
content: "";
position: absolute;
left: 0;
top: 32px;
width: 12px;
height: 12px;
background: var(--coral);
border-radius: 50%;
}
body.page-id-207.avg-trust .no-vc > h2:first-of-type {
border-top: 0;
padding-top: 0;
margin-top: 24px;
}
body.page-id-207.avg-trust .no-vc > h2:first-of-type::before {
top: 4px;
}
@media (max-width: 640px) {
body.page-id-207.avg-trust .no-vc > h2 {
font-size: 26px;
margin-top: 40px;
padding-top: 22px;
}
body.page-id-207.avg-trust .no-vc > h2::before { top: 26px; width: 10px; height: 10px; }
body.page-id-207.avg-trust .no-vc > h2:first-of-type::before { top: 2px; }
}
/* --- Jumplist sidecard styling ----------------------------------
The existing .av-jumplist markup is a labelled UL. At desktop
restyle as a compact right-column sidecard that reads as a
companion to the founder portrait — a designed policy-toc-like
navigational panel. */
body.page-id-207.avg-trust .av-jumplist {
background: var(--cream);
border: 1.5px solid var(--rule);
border-radius: var(--radius-2);
padding: 20px 22px 18px;
margin: 24px 0 32px;
}
body.page-id-207.avg-trust .av-jumplist__title {
font-family: var(--meta);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 12px;
}
body.page-id-207.avg-trust .av-jumplist__list {
list-style: none;
margin: 0;
padding: 0;
counter-reset: about-toc;
}
body.page-id-207.avg-trust .av-jumplist__list li {
counter-increment: about-toc;
position: relative;
padding: 8px 0 8px 34px;
font-size: 14px;
line-height: 1.35;
border-top: 1px solid var(--hair);
}
body.page-id-207.avg-trust .av-jumplist__list li:first-child { border-top: 0; }
body.page-id-207.avg-trust .av-jumplist__list li::before {
content: counter(about-toc, decimal-leading-zero);
position: absolute;
left: 0;
top: 10px;
font-family: var(--meta);
font-weight: 700;
font-size: 10.5px;
letter-spacing: 0.10em;
color: var(--coral-deep);
}
body.page-id-207.avg-trust .av-jumplist__list a {
color: var(--ink);
text-decoration: none;
}
body.page-id-207.avg-trust .av-jumplist__list a:hover {
color: var(--coral-deep);
text-decoration: underline;
}
/* --- Reviewer-pending tile --------------------------------------
§2.8 point 5: designed reviewer-pending tile. The About markup
places the pending copy in the SECOND paragraph after the
#reviewers H2 (leading with `We're currently onboarding
our medical reviewer.`). Style it as a designed
.av-commitment-equivalent tile in the forest (Vet Corner) hue. */
body.page-id-207.avg-trust .no-vc h2#reviewers + p + p {
background: var(--paper);
border-left: 4px solid var(--forest, #2f6b4a);
border-top: 1px solid var(--hair);
border-right: 1px solid var(--hair);
border-bottom: 1px solid var(--hair);
border-radius: 0 var(--radius-2) var(--radius-2) 0;
padding: 20px 24px 18px;
margin: 18px 0 24px;
font-size: 16px;
line-height: 1.55;
color: var(--ink);
position: relative;
}
body.page-id-207.avg-trust .no-vc h2#reviewers + p + p::before {
content: "REVIEWER PROFILE — PENDING";
display: block;
font-family: var(--meta);
font-weight: 700;
font-size: 10.5px;
letter-spacing: 0.14em;
color: var(--forest, #2f6b4a);
margin: 0 0 8px;
}
body.page-id-207.avg-trust .no-vc h2#reviewers + p + p strong {
color: var(--ink);
font-weight: 700;
}
/* --- Process grid: keep existing behavior, tighten spacing ------- */
body.page-id-207.avg-trust .av-process-grid {
margin: 24px 0 32px;
}
/* --- Founder pull-quote highlight -------------------------------
§2.8 point 2 mentions a founder pull-quote. The founder story
ends with a single-line paragraph ("Robin Hale is a pen name…").
Give it pull-quote treatment where it lives — coral rule + italic. */
body.page-id-207.avg-trust .no-vc > p:has(> em:only-child),
body.page-id-207.avg-trust .no-vc > blockquote {
border-left: 3px solid var(--coral);
padding: 4px 0 4px 20px;
margin: 24px 0;
font-family: var(--display);
font-weight: 700;
font-size: 22px;
line-height: 1.35;
font-style: italic;
color: var(--ink);
}
/* ================================================================
MAJOR 11 (search results grid) — restyle plain ruled list as
.new-card grid at desktop, stack at mobile. Applies to search.php
markup (.s-list / .s-row).
================================================================ */
.avg-search .s-results .s-list {
list-style: none; padding: 0; margin: 32px 0 48px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 900px) {
.avg-search .s-results .s-list { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 560px) {
.avg-search .s-results .s-list { grid-template-columns: 1fr; gap: 16px; }
}
.avg-search .s-results .s-row {
background: var(--page);
border: 1.5px solid var(--hair);
border-radius: var(--radius-2);
padding: 22px 24px 20px;
transition: border-color .15s, transform .12s;
position: relative;
overflow: hidden;
}
.avg-search .s-results .s-row::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--coral);
}
.avg-search .s-results .s-row-tone-a::before { background: var(--sky); }
.avg-search .s-results .s-row-tone-b::before { background: var(--sun); }
.avg-search .s-results .s-row-tone-c::before { background: var(--coral); }
.avg-search .s-results .s-row-tone-d::before { background: var(--forest); }
.avg-search .s-results .s-row:hover {
border-color: var(--ink);
transform: translateY(-1px);
}
.avg-search .s-results .s-kicker {
font-family: var(--meta); font-weight: var(--meta-w);
font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 10px;
}
.avg-search .s-results .s-title {
font-family: var(--display); font-weight: 800;
font-size: 20px; line-height: 1.2; letter-spacing: -0.01em;
margin: 0 0 10px;
}
.avg-search .s-results .s-title a {
color: var(--ink);
text-decoration: none;
}
.avg-search .s-results .s-title a:hover { color: var(--coral-deep); }
.avg-search .s-results .s-excerpt {
font-family: var(--body); font-size: 14px; line-height: 1.5;
color: var(--ink-2);
margin: 0;
}
/* ================================================================
FV-1 (2026-08-20) — 404 hub-tile anchor color
The Wave 6 scope-tighten (line ~1631) set `body.avg-404 .av-404 a`
to var(--coral-deep). The .av-404-tile anchors inherited that,
overriding their designed tile foregrounds — invisible title on
the Bird Health tile (coral-deep on coral-deep gradient) and
~1.6:1 on Vet Corner's forest-deep. Restore the tile-designed
foreground with specificity that beats the container-scoped
anchor rule; mirrors the homepage .sec-tile pattern
(white on the three dark gradients, ink on the yellow routine).
================================================================ */
body.avg-404 .av-404 a.av-404-tile,
body.avg-404 .av-404 a.av-404-tile:link,
body.avg-404 .av-404 a.av-404-tile:visited,
body.avg-404 .av-404 a.av-404-tile:hover,
body.avg-404 .av-404 a.av-404-tile:focus,
body.avg-404 .av-404 a.av-404-tile:active {
color: #ffffff;
}
body.avg-404 .av-404 a.av-404-tile--routine,
body.avg-404 .av-404 a.av-404-tile--routine:link,
body.avg-404 .av-404 a.av-404-tile--routine:visited,
body.avg-404 .av-404 a.av-404-tile--routine:hover,
body.avg-404 .av-404 a.av-404-tile--routine:focus,
body.avg-404 .av-404 a.av-404-tile--routine:active {
color: var(--ink);
}
/* ================================================================
AMENDMENT 3 — BLEED LAW (owner ruling 2026-08-20)
Category / policy / contact / about / 404 / service pages —
every color-banded surface bleeds. Content stays in .wrap.
The full-bleed gradient category hero already bleeds (correct).
Policy heroes, service heroes, contact hero, about hero, 404
band all default to bleed.
================================================================ */
/* Category page - "Where to go next" endplate already bleeds via
its own selector. If any content-width color box slips through,
flag it via invariant g-bleed-law-inventory. */
/* Policy / About / Contact / 404 / Service heroes — force bled ground.
These use pages-g.css hero selectors. */
body.avg-policy .av-page-hero,
body.avg-about .av-page-hero,
body.avg-contact .av-page-hero,
body.avg-404 .av-not-found,
body.avg-service .av-service-hero {
width: 100%;
max-width: none;
padding-left: 0;
padding-right: 0;
}
body.avg-policy .av-page-hero > .wrap,
body.avg-about .av-page-hero > .wrap,
body.avg-contact .av-page-hero > .wrap,
body.avg-404 .av-not-found > .wrap,
body.avg-service .av-service-hero > .wrap {
max-width: var(--wrap);
margin-left: auto; margin-right: auto;
padding-left: var(--wrap-gutter-dt);
padding-right: var(--wrap-gutter-dt);
}
@media (max-width: 900px) {
body.avg-policy .av-page-hero > .wrap,
body.avg-about .av-page-hero > .wrap,
body.avg-contact .av-page-hero > .wrap,
body.avg-404 .av-not-found > .wrap,
body.avg-service .av-service-hero > .wrap {
padding-left: var(--wrap-gutter-mb);
padding-right: var(--wrap-gutter-mb);
}
}
/* ================================================================
SPARSE-TERM LAYOUT (owner walkthrough spec §4.4, 2026-08-20)
Terms with 1-3 articles: the flagged term
(/category/routine-care/hygiene-housing/) had 1 article rendering
as a lonely 1/3-width card in a void. Single-article treatment
upgrades to a featured full-width card; 2- and 3-article rows
render horizontal grids without the 3-col void.
================================================================ */
body.avg-cat .av-category-grid-wrap--sparse .av-category-grid {
display: grid;
gap: 24px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
body.avg-cat .av-category-grid-wrap--sparse.av-category-grid-wrap--single .av-category-grid {
grid-template-columns: 1fr;
max-width: 900px;
margin: 0 auto;
}
body.avg-cat .av-category-grid-wrap--single .av-category-card {
display: grid;
grid-template-columns: minmax(280px, 42%) 1fr;
gap: 32px;
background: var(--page);
border: 1.5px solid var(--rule);
padding: 0;
overflow: hidden;
}
body.avg-cat .av-category-grid-wrap--single .av-category-card .av-category-card__thumb-link {
display: block;
overflow: hidden;
background: var(--cream);
}
body.avg-cat .av-category-grid-wrap--single .av-category-card .av-category-card__thumb-link img {
width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block;
}
body.avg-cat .av-category-grid-wrap--single .av-category-card .av-category-card__body {
padding: 32px 32px 32px 0;
display: flex; flex-direction: column; justify-content: center;
}
body.avg-cat .av-category-grid-wrap--single .av-category-card .av-category-card__title {
font-size: 30px; line-height: 1.15; letter-spacing: -.015em;
margin: 0 0 14px;
}
body.avg-cat .av-category-grid-wrap--single .av-category-card .av-category-card__excerpt {
font-size: 16px; line-height: 1.6;
}
@media (max-width: 720px) {
body.avg-cat .av-category-grid-wrap--single .av-category-card {
grid-template-columns: 1fr;
}
body.avg-cat .av-category-grid-wrap--single .av-category-card .av-category-card__body {
padding: 24px 22px 26px;
}
body.avg-cat .av-category-grid-wrap--single .av-category-card .av-category-card__title {
font-size: 24px;
}
}
/* ================================================================
RELATED IN {parent hub} band — sparse-term companion (spec §4.4)
3-4 sibling cards in the same hub, rendered BEFORE the endplate
finale. Answers the "empty page" feeling with content, not
whitespace management.
================================================================ */
body.avg-cat .av-related-in-hub {
background: var(--paper);
border-top: 1.5px solid var(--hair);
padding: var(--section-py-dt) 0;
}
body.avg-cat .av-related-in-hub__inner {
max-width: var(--wrap);
margin: 0 auto;
padding: 0 var(--wrap-gutter-dt);
}
body.avg-cat .av-related-in-hub__head {
margin-bottom: 28px;
padding-bottom: 14px;
border-bottom: 1.5px solid var(--rule);
}
body.avg-cat .av-related-in-hub__title {
font-family: var(--display); font-weight: var(--display-w);
font-size: 28px; line-height: 1.1; letter-spacing: -.02em;
color: var(--ink); margin: 0;
}
body.avg-cat .av-related-in-hub__title a {
color: var(--hub-deep, var(--coral-deep));
text-decoration: none;
border-bottom: 2px solid currentColor;
padding-bottom: 2px;
}
body.avg-cat .av-related-in-hub__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 24px;
}
@media (max-width: 900px) {
body.avg-cat .av-related-in-hub { padding: var(--section-py-mb) 0; }
body.avg-cat .av-related-in-hub__inner { padding: 0 var(--wrap-gutter-mb); }
body.avg-cat .av-related-in-hub__title { font-size: 22px; }
}
/* ================================================================
AMENDMENT 5 — BLEED BREAKOUT (owner walkthrough round 2, 2026-08-20)
Amendment 3's `max-width: none !important` on banded sections was
defeated by the theme's ancestor wrappers:
.non-VC-page (1280px) > .row (1270px) > .small-12.columns (1170px)
.av-404 wrapper (1280px) never retrofitted
This block neutralises those wrappers on the affected page scopes so
banded sections can span the viewport. Content stays column-capped
via the .__inner / .wrap inner selectors already declared elsewhere.
Sentinel string (probe grepable): av-bleed-breakout-amd5
================================================================ */
/* Prevent horizontal scrollbar from 100vw breakout on affected scopes. */
body.avg-hub,
body.avg-money,
body.avg-404,
body.page-id-207.avg-trust { overflow-x: hidden; }
body.avg-hub #wrapper,
body.avg-money #wrapper,
body.avg-404 #wrapper,
body.page-id-207.avg-trust #wrapper { overflow-x: hidden; }
/* Neutralise theme ancestor caps on hub / money / About templates. */
body.avg-hub .non-VC-page,
body.avg-money .non-VC-page,
body.page-id-207.avg-trust .non-VC-page {
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
body.avg-hub .non-VC-page .row,
body.avg-money .non-VC-page .row,
body.page-id-207.avg-trust .non-VC-page .row {
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
body.avg-hub .non-VC-page .row > .small-12.columns,
body.avg-money .non-VC-page .row > .small-12.columns,
body.page-id-207.avg-trust .non-VC-page .row > .small-12.columns {
max-width: none !important;
padding: 0 !important;
width: 100% !important;
float: none !important;
}
body.avg-hub .non-VC-page .row > .small-12.columns > .no-vc,
body.avg-money .non-VC-page .row > .small-12.columns > .no-vc,
body.page-id-207.avg-trust .non-VC-page .row > .small-12.columns > .no-vc {
max-width: none !important;
padding: 0 !important;
width: 100% !important;
}
/* ---------------------------------------------------------------
Money page — turn banded surfaces into full-width bled bands
with an inner content wrap. Kills P7 (dead right half): the
grid was defined but had only one child, so switch to a plain
full-width layout, cream ground, content in .wrap.
--------------------------------------------------------------- */
body.avg-money .av-service-hero {
background: var(--cream);
border: 0;
border-top: 1.5px solid var(--hair);
border-bottom: 1.5px solid var(--rule);
border-radius: 0;
padding: 56px 0 68px;
margin: 0 0 40px;
display: block;
width: 100%;
max-width: none;
}
body.avg-money .av-service-hero__body {
max-width: var(--wrap, 1280px);
margin: 0 auto;
padding: 0 var(--wrap-gutter-dt, 32px);
box-sizing: border-box;
}
@media (max-width: 900px) {
body.avg-money .av-service-hero { padding: 40px 0 48px; }
body.avg-money .av-service-hero__body { padding: 0 var(--wrap-gutter-mb, 20px); }
}
body.avg-money .av-checklist {
background: var(--cream);
border: 0;
border-top: 1.5px solid var(--hair);
border-bottom: 1.5px solid var(--rule);
border-radius: 0;
padding: 48px 0 56px;
margin: 40px 0;
width: 100%;
max-width: none;
}
/* Inner wrap for checklist content — apply to direct-child eyebrow + list. */
body.avg-money .av-checklist__eyebrow,
body.avg-money .av-checklist__list {
max-width: var(--wrap, 1280px);
margin-left: auto;
margin-right: auto;
padding-left: var(--wrap-gutter-dt, 32px);
padding-right: var(--wrap-gutter-dt, 32px);
box-sizing: border-box;
}
@media (max-width: 900px) {
body.avg-money .av-checklist { padding: 32px 0 40px; }
body.avg-money .av-checklist__eyebrow,
body.avg-money .av-checklist__list {
padding-left: var(--wrap-gutter-mb, 20px);
padding-right: var(--wrap-gutter-mb, 20px);
}
}
/* Money endplate + Trust endplate — cream bled band. Overrides the
1498 static-endplate reset (that was for when Foundation .row was
still constraining; with the row now neutralised we can bleed). */
body.avg-money .av-endplate,
body.avg-trust .av-endplate,
body.avg-404 .av-endplate {
width: 100% !important;
max-width: none !important;
padding: 48px 0 56px;
margin: 64px 0 0;
background: var(--cream);
border-top: 1.5px solid var(--rule);
}
body.avg-money .av-endplate__section,
body.avg-trust .av-endplate__section,
body.avg-404 .av-endplate__section {
max-width: var(--wrap, 1280px);
margin: 0 auto;
padding: 0 var(--wrap-gutter-dt, 32px);
box-sizing: border-box;
}
body.avg-money .av-endplate__divider,
body.avg-trust .av-endplate__divider,
body.avg-404 .av-endplate__divider {
max-width: var(--wrap, 1280px);
margin: 32px auto;
padding: 0 var(--wrap-gutter-dt, 32px);
}
@media (max-width: 640px) {
body.avg-money .av-endplate__section,
body.avg-trust .av-endplate__section,
body.avg-404 .av-endplate__section {
padding: 0 var(--wrap-gutter-mb, 20px);
}
}
/* ---------------------------------------------------------------
404 page — restructured so the .av-404-band bleeds edge-to-edge
as a bled band (P3 ruling: drop the border/radius card look).
Below-band content (tiles + search) stays in a content wrap.
Requires template edit: 404.php gains .av-404-band__wrap +
.av-404-inner wrappers.
--------------------------------------------------------------- */
body.avg-404 .av-404 {
max-width: none;
padding: 0;
margin: 0;
width: 100%;
}
body.avg-404 .av-404-band {
background: var(--cream);
border: 0;
border-top: 1.5px solid var(--hair);
border-bottom: 1.5px solid var(--rule);
border-radius: 0;
padding: 56px 0 68px;
margin: 0 0 40px;
display: block;
width: 100%;
max-width: none;
}
body.avg-404 .av-404-band__wrap {
max-width: var(--wrap, 1280px);
margin: 0 auto;
padding: 0 var(--wrap-gutter-dt, 32px);
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
align-items: center;
box-sizing: border-box;
}
@media (max-width: 900px) {
body.avg-404 .av-404-band { padding: 40px 0 48px; }
body.avg-404 .av-404-band__wrap { grid-template-columns: 1fr; padding: 0 var(--wrap-gutter-mb, 20px); }
}
body.avg-404 .av-404-inner {
max-width: var(--wrap, 1280px);
margin: 0 auto;
padding: 0 var(--wrap-gutter-dt, 32px) 64px;
box-sizing: border-box;
}
@media (max-width: 640px) {
body.avg-404 .av-404-inner { padding: 0 var(--wrap-gutter-mb, 20px) 40px; }
}
/* ---------------------------------------------------------------
About page (page-id-207) P2 fixes:
1. Coral dash left-aligns to match H1 (was centered — reads as
leftover ornament from a deleted centered layout).
2. H1 left-aligns explicitly (overrides page-id-207 rule that
set text-align: center; the trust-page rule left-aligns).
3. Grid gets `grid-auto-flow: dense` so H2/paragraphs fill row 1
col 1 instead of starting at row 2 (was the "~850px empty
left column before 'From the founder'" bug).
4. New .av-page-dek subtitle below H1.
--------------------------------------------------------------- */
body.page-id-207.avg-trust .page-title {
padding: 56px 32px 44px;
}
body.page-id-207.avg-trust .page-title h1 {
text-align: left !important;
max-width: var(--wrap, 1280px);
margin: 0 auto;
padding: 0;
}
/* Constrain hero content to the wrap width. The ::before dash sits
inside the h1's containing block; give it the same wrap centering
as the h1 so it lands at the LEFT edge of the wrap column (not
centered on the viewport — that centered dash was P2's leftover
ornament complaint). */
body.page-id-207.avg-trust .page-title {
padding-left: 0;
padding-right: 0;
}
body.page-id-207.avg-trust .page-title::before {
/* Left-align the dash to the wrap's content column (P2 fix): the
block's left margin is 32px (wrap gutter) plus half of any
viewport-vs-wrap slack, so the dash's left edge lines up with
the H1's left edge. Width stays 40px (matches parent-theme
.page-title::before base rule). */
width: 40px;
height: 3px;
background: var(--coral);
margin-left: max(var(--wrap-gutter-dt, 32px), calc((100% - var(--wrap, 1280px)) / 2 + var(--wrap-gutter-dt, 32px))) !important;
margin-right: 0 !important;
margin-top: 0 !important;
margin-bottom: 18px !important;
}
body.page-id-207.avg-trust .page-title h1,
body.page-id-207.avg-trust .page-title .av-page-dek {
padding-left: var(--wrap-gutter-dt, 32px);
padding-right: var(--wrap-gutter-dt, 32px);
box-sizing: border-box;
}
body.page-id-207.avg-trust .page-title .av-page-dek {
max-width: var(--wrap, 1280px);
margin: 14px auto 0;
font-family: var(--body);
font-size: 18px;
line-height: 1.55;
color: var(--ink-2);
font-weight: 500;
}
/* The dek is prepended to the_content (see the_content filter in
functions.php), so it lives inside .no-vc rather than .page-title.
Style it as a page-lead subtitle regardless of its DOM location. */
body.page-id-207.avg-trust .av-about-dek {
font-family: var(--body);
font-size: 19px;
line-height: 1.55;
color: var(--ink-2);
font-weight: 500;
margin: 8px 0 24px;
max-width: 780px;
grid-column: 1 !important; /* keeps it in the left/main column at desktop */
}
@media (max-width: 640px) {
body.page-id-207.avg-trust .av-about-dek { font-size: 17px; margin: 0 0 20px; }
}
@media (max-width: 640px) {
body.page-id-207.avg-trust .page-title h1,
body.page-id-207.avg-trust .page-title::before,
body.page-id-207.avg-trust .page-title .av-page-dek {
padding-left: var(--wrap-gutter-mb, 20px);
padding-right: var(--wrap-gutter-mb, 20px);
}
body.page-id-207.avg-trust .page-title .av-page-dek { font-size: 16px; }
}
/* About body layout — abandon the failing 2-col grid (which trapped
the reading column in row 2, below the sidebar stack) for a plain
float-right sidebar. The founder portrait + jumplist share a
single .av-about-sidebar float on the right; every other .no-vc
child flows naturally in the reading column and wraps around the
sidebar. This is the "magazine layout" the owner's walkthrough
complaint pointed at: reading column starts at the top, next to
the sidebar — not below it. */
@media (min-width: 900px) {
body.page-id-207.avg-trust .non-VC-page .row > .small-12.columns > .no-vc {
max-width: var(--wrap, 1280px) !important;
margin: 32px auto 0 !important;
padding: 0 var(--wrap-gutter-dt, 32px) !important;
box-sizing: border-box;
display: block; /* revert from grid */
}
/* Wrap the sidebar imagery + jumplist as a single floated group. */
body.page-id-207.avg-trust .no-vc > .av-founder-portrait {
float: right;
clear: right;
width: 300px;
margin: 8px 0 20px 40px;
grid-column: unset;
grid-row: unset;
}
body.page-id-207.avg-trust .no-vc > .av-jumplist {
float: right;
clear: right;
width: 300px;
margin: 0 0 24px 40px;
grid-column: unset;
}
/* Reading column: prose flows to the left of the floated sidebar. */
body.page-id-207.avg-trust .no-vc > * {
max-width: none;
grid-column: unset;
}
/* Cap prose measure at 780px only when there's NO sidebar to the
right (below the point where the sidebar has floated past). */
body.page-id-207.avg-trust .no-vc > p,
body.page-id-207.avg-trust .no-vc > ul,
body.page-id-207.avg-trust .no-vc > ol {
max-width: 780px;
}
/* Endplate must clear the floats so it starts on a new row. */
body.page-id-207.avg-trust .no-vc > .av-endplate {
clear: both;
}
/* Process grid and other structural blocks: clear the float. */
body.page-id-207.avg-trust .no-vc > .av-process-grid {
clear: right;
max-width: none;
}
}
/* Trust-page (About + policy) content column: since ancestors are
neutralised on About, re-anchor the prose to a wrap. */
body.page-id-207.avg-trust .av-endplate {
margin-top: 56px;
}
/* About page endplate — the endplate is emitted inside .no-vc, which
at desktop is a 2-column grid. Without breakout the endplate is
trapped in column 1 (~868px). Use 100vw breakout so the cream ground
spans the viewport; content stays column-capped via .__section wrap. */
@media (min-width: 900px) {
body.page-id-207.avg-trust .no-vc > .av-endplate {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw !important;
margin-right: -50vw !important;
width: 100vw !important;
max-width: 100vw !important;
grid-column: 1 / -1 !important;
}
}
/* ---------------------------------------------------------------
Hub page (avg-hub) — the section-band bg was previously bled but
the hero + outro were NOT because their ancestor was capped.
Neutralising ancestors above solves it; ensure the .av-hub-hero
and .av-hub-outro carry `width: 100%` explicitly to defeat any
inline-block sizing.
--------------------------------------------------------------- */
body.avg-hub .av-hub-hero,
body.avg-hub .av-hub-outro,
body.avg-hub .av-hub-vet-exit,
body.avg-hub .av-section-band {
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* ---------------------------------------------------------------
W2 (spec §1.2a) — Dropdown panel width: `min(280px, intrinsic)`.
Current renders at fixed 240px, wrapping longer labels. Raise
to 280 as spec (owner ruling: full-perimeter hue border kept —
the rendered treatment beats the spec's left-bar sketch).
--------------------------------------------------------------- */
nav.primary .primary-dropdown {
min-width: min(280px, 100%);
}
/* Amendment-5 marker sentinel — grep target for the invariants
script and the qa/probe-bleed.js probe. Do not remove. */
body.avg-hub::after,
body.avg-money::after,
body.avg-404::after,
body.page-id-207.avg-trust::after {
content: "";
display: block;
height: 0;
overflow: hidden;
--av-bleed-breakout-amd5: "on";
}
/* ================================================================
ROUND-2 MICRO-FIX N1+N2 (2026-08-20, wordpress-developer)
N1: Amendment-5 bleed-breakout un-constrained ancestors, which took
the money-page CONTENT column with the color grounds. Restore
an inner content wrap for every direct child of .no-vc on
avg-money EXCEPT the bled bands (.av-service-hero, .av-checklist,
.av-endplate — they carry their own inner wraps already).
N2: `body.avg-money .non-VC-page a` (specificity 0,3,1) beat the
`.av-provider-card__cta` color rule (0,2,1) — CTAs rendered as
coral-deep on ink (~2:1). Add a higher-specificity override so
the two conversion buttons match the site's white-on-ink button
system (>= 4.5:1).
Sentinel string (probe grepable): av-round2micro-n1n2
================================================================ */
/* N1 — money-page content-column restoration. */
body.avg-money .non-VC-page .row > .small-12.columns > .no-vc > * {
max-width: var(--wrap, 1280px);
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--wrap-gutter-dt, 32px);
padding-right: var(--wrap-gutter-dt, 32px);
box-sizing: border-box;
}
@media (max-width: 900px) {
body.avg-money .non-VC-page .row > .small-12.columns > .no-vc > * {
padding-left: var(--wrap-gutter-mb, 20px);
padding-right: var(--wrap-gutter-mb, 20px);
}
}
/* Bled bands opt out — their inner-container children (__body / __list
/ __section / __eyebrow) already carry the wrap + gutter. */
body.avg-money .non-VC-page .row > .small-12.columns > .no-vc > .av-service-hero,
body.avg-money .non-VC-page .row > .small-12.columns > .no-vc > .av-checklist,
body.avg-money .non-VC-page .row > .small-12.columns > .no-vc > .av-endplate {
max-width: none;
padding-left: 0;
padding-right: 0;
}
/* N2 — provider CTA contrast fix (>= 4.5:1). */
body.avg-money .non-VC-page .av-provider-card__cta {
color: #ffffff;
background: var(--ink);
}
body.avg-money .non-VC-page .av-provider-card__cta:hover,
body.avg-money .non-VC-page .av-provider-card__cta:focus-visible {
color: #ffffff;
background: var(--coral);
}
/* .av-provider-card__more (the secondary "Read the full evaluation"
link) intentionally keeps its coral-deep on paper — that's a link
on white, not a button on black, and clears WCAG. */
/* Sentinel marker for the invariants + probe. */
body.avg-money::after {
--av-round2micro-n1n2: "on";
}
/* ================================================================
PHASE 1 FIXPASS (2026-08-21) — About-page + trust end-matter
content-constraint restoration.
Amendment 5 (bleed-breakout) neutralised .row + .no-vc caps on
page-id-207 (About) so its endplate could bleed. Side effect: at
mobile the reading column lost the 20px gutter it inherited from
`body.avg-trust .non-VC-page .row { padding: 0 20px }`. Restore
the gutter on the .no-vc children at <=899px while keeping the
endplate's 100vw breakout (it's re-declared below at the same
breakpoint). Critic Phase 1 blocker 1 (About mobile).
Also introduces the .av-endmatter component used by the
trust-page + money-page quiet end-matter strip.
Sentinel: av-phase1-fixpass-pages
================================================================ */
/* (A) About page mobile gutter restoration. Desktop already gets
the wrap+gutter via the min-width:900 rule earlier (line ~2440).
Mobile explicitly re-adds padding on the .no-vc container.
Exempts .av-endplate + .av-endmatter (they carry their own
100vw breakout so their cream ground still spans the viewport). */
@media (max-width: 899px) {
body.page-id-207.avg-trust .non-VC-page .row > .small-12.columns > .no-vc {
padding-left: var(--wrap-gutter-mb, 20px) !important;
padding-right: var(--wrap-gutter-mb, 20px) !important;
box-sizing: border-box;
}
/* Endplate and end-matter escape via 100vw breakout so their
cream ground still spans the viewport at mobile. */
body.page-id-207.avg-trust .no-vc > .av-endplate,
body.page-id-207.avg-trust .no-vc > .av-endmatter {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw !important;
margin-right: -50vw !important;
width: 100vw !important;
max-width: 100vw !important;
}
}
/* ================================================================
.av-endmatter — quiet end-of-page strip for trust + money pages.
Design: cream bled ground, hairline top, three noun-label cards
(destination page titles only, no descriptions), NO defensive
lead sentence, NO "Where to go next" eyebrow. Critic punch item
4 (trust pages ending inconsistently); punch item 5 (money page
ending on FAQ accordion).
Structure emitted by avianvets_endmatter_html():
================================================================ */
body.avg-trust .av-endmatter,
body.avg-money .av-endmatter {
width: 100% !important;
max-width: none !important;
padding: 48px 0 56px;
margin: 64px 0 0;
background: var(--cream);
border-top: 1.5px solid var(--rule);
box-sizing: border-box;
}
body.avg-trust .av-endmatter__section,
body.avg-money .av-endmatter__section {
max-width: var(--wrap, 1280px);
margin: 0 auto;
padding: 0 var(--wrap-gutter-dt, 32px);
box-sizing: border-box;
}
body.avg-trust .av-endmatter__cards,
body.avg-money .av-endmatter__cards {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 640px) {
body.avg-trust .av-endmatter,
body.avg-money .av-endmatter { padding: 36px 0 44px; margin-top: 48px; }
body.avg-trust .av-endmatter__section,
body.avg-money .av-endmatter__section { padding: 0 var(--wrap-gutter-mb, 20px); }
body.avg-trust .av-endmatter__cards,
body.avg-money .av-endmatter__cards { grid-template-columns: 1fr; gap: 12px; }
}
body.avg-trust .av-endmatter__card,
body.avg-money .av-endmatter__card {
background: var(--page);
border: 1.5px solid var(--hair);
border-radius: var(--radius-2);
transition: border-color .15s;
list-style: none;
}
body.avg-trust .av-endmatter__card:hover,
body.avg-trust .av-endmatter__card:focus-within,
body.avg-money .av-endmatter__card:hover,
body.avg-money .av-endmatter__card:focus-within {
border-color: var(--ink);
}
body.avg-trust .av-endmatter__card a,
body.avg-money .av-endmatter__card a {
display: flex;
align-items: center;
gap: 10px;
padding: 18px 20px;
text-decoration: none;
color: var(--ink);
min-height: 56px;
box-sizing: border-box;
}
body.avg-trust .av-endmatter__card a:hover,
body.avg-money .av-endmatter__card a:hover { text-decoration: none; }
body.avg-trust .av-endmatter__title,
body.avg-money .av-endmatter__title {
font-family: var(--display);
font-weight: var(--display-w-2);
font-size: 16px;
color: var(--ink);
letter-spacing: -.005em;
flex: 1;
}
body.avg-trust .av-endmatter__card a::after,
body.avg-money .av-endmatter__card a::after {
content: "\2192";
color: var(--ink-3);
font-size: 15px;
flex: 0 0 auto;
}
body.avg-trust .av-endmatter__card a:hover::after,
body.avg-money .av-endmatter__card a:hover::after { color: var(--coral-deep); }
/* Freshness meta strip — small caps line under the cards. */
body.avg-trust .av-endmatter__meta,
body.avg-money .av-endmatter__meta {
margin: 22px 0 0;
font-family: var(--meta);
font-weight: var(--meta-w);
font-size: 11.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-3);
text-align: left;
}
body.avg-trust .av-endmatter__meta a,
body.avg-money .av-endmatter__meta a {
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--hair);
}
body.avg-trust .av-endmatter__meta a:hover,
body.avg-money .av-endmatter__meta a:hover {
color: var(--coral-deep);
border-color: var(--coral-deep);
}
/* ================================================================
.av-signoff — About-page founder signature close (critic item 4
About-specific): 48px illustrated avatar + "Robin Hale, editor"
+ a contact line. Sits at the end of About, cream bled band.
================================================================ */
body.avg-trust .av-signoff {
width: 100% !important;
max-width: none !important;
padding: 48px 0 56px;
margin: 64px 0 0;
background: var(--cream);
border-top: 1.5px solid var(--rule);
box-sizing: border-box;
}
body.avg-trust .av-signoff__inner {
max-width: var(--wrap, 1280px);
margin: 0 auto;
padding: 0 var(--wrap-gutter-dt, 32px);
display: flex;
align-items: center;
gap: 20px;
box-sizing: border-box;
}
@media (max-width: 640px) {
body.avg-trust .av-signoff { padding: 36px 0 40px; margin-top: 48px; }
body.avg-trust .av-signoff__inner { padding: 0 var(--wrap-gutter-mb, 20px); }
}
body.avg-trust .av-signoff__avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
background: var(--hub-tint, var(--paper));
border: 1.5px solid var(--hair);
flex: 0 0 auto;
}
body.avg-trust .av-signoff__avatar img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
body.avg-trust .av-signoff__body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
body.avg-trust .av-signoff__name {
font-family: var(--display);
font-weight: var(--display-w);
font-size: 17px;
color: var(--ink);
letter-spacing: -.005em;
}
body.avg-trust .av-signoff__contact {
font-family: var(--body);
font-size: 14.5px;
color: var(--ink-2);
line-height: 1.5;
}
body.avg-trust .av-signoff__contact a {
color: var(--coral-deep);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ================================================================
Money-page byline component (critic punch item 5.1).
The pre-fixpass "By Robin Hale." rendered as an italic 13px grey
orphan under the chips with ~90px of dead cream below. Replaced
in the post_content with a proper byline row: 28px illustrated
avatar + "By Robin Hale · Provider details verified monthly" in
the meta caps face, on one line with the chip row (wraps below
at 640).
================================================================ */
body.avg-money .av-service-hero__byline {
display: flex;
align-items: center;
gap: 12px;
margin: 18px 0 0;
padding: 0;
font-family: var(--meta);
font-weight: var(--meta-w);
font-size: 12px;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--ink-2);
line-height: 1.4;
}
body.avg-money .av-service-hero__byline-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
overflow: hidden;
background: var(--hub-tint, var(--paper));
border: 1.5px solid var(--hair);
flex: 0 0 auto;
}
body.avg-money .av-service-hero__byline-avatar img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
body.avg-money .av-service-hero__byline-text {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
}
body.avg-money .av-service-hero__byline-sep {
color: var(--ink-3);
}
/* Retire the previous orphan attrib to belt-and-braces. */
body.avg-money .av-service-hero__attrib { display: none !important; }
@media (max-width: 640px) {
body.av-money .av-service-hero__byline {
flex-wrap: wrap;
font-size: 11.5px;
}
}
/* Sentinel marker. */
body.avg-trust::after { --av-phase1-fixpass-pages: "on"; }
/* ==== BEGIN MOBILE-TABLE-CARDS 2026-08-26 (money-page half) ===============
Owner ruling 2026-08-26 (reviews/mobile-table-format.md). Article-half of
the transform lives in article-g.css (loaded only on avg-article); the
money page carries body.avg-money and article-g.css is NOT enqueued
there, so the .av-table-scroll transform selectors are duplicated here
scoped to avg-money. Below ≤1023 the money-page pricing/comparison
tables become the same row-per-card stack the article tables use.
Data-label injection is provided by inc/g-mobile-table-datalabel.php on
the_content, which runs on this page too.
========================================================================= */
@media (max-width: 1023px) {
body.avg-money .av-table-scroll {
overflow-x: visible;
-webkit-overflow-scrolling: auto;
background: transparent;
max-width: 100%;
padding-right: 0;
border: 0;
-webkit-mask-image: none;
mask-image: none;
}
body.avg-money .av-table-scroll thead {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
body.avg-money .av-table-scroll > table,
body.avg-money .av-table-scroll > table > tbody { display: block; }
body.avg-money .av-table-scroll > table {
min-width: 0;
width: 100%;
}
body.avg-money .av-table-scroll > table > tbody {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
padding: var(--space-4);
background: var(--paper);
width: 100%;
box-sizing: border-box;
}
/* Zebra kill — the desktop rule at pages-g.css line 808
(body.avg-money .av-table-scroll tbody tr:nth-child(even) {
background:#FDFBF3}) is unscoped to any media query, so at ≤1023
it fights the card treatment and paints the 2nd/4th provider cards
pale cream instead of the spec's uniform white-on-cream
(reviews/mobile-fixes-verification.md §1 finding 2). !important on
both odd and even here — spec parity beats specificity roulette. */
body.avg-money .av-table-scroll > table > tbody > tr,
body.avg-money .av-table-scroll > table > tbody > tr:nth-child(odd),
body.avg-money .av-table-scroll > table > tbody > tr:nth-child(even) {
display: block;
background: var(--page) !important;
border: 1.5px solid var(--hair);
border-top: 4px solid var(--hub, var(--coral));
border-radius: var(--radius-2);
padding: var(--space-4) var(--space-5);
box-sizing: border-box;
}
body.avg-money .av-table-scroll > table > tbody > tr > td:first-child {
display: block;
font-family: var(--display);
font-weight: 700;
font-size: 17px;
line-height: 1.25;
color: var(--ink);
padding: 0 0 var(--space-3) 0;
margin: 0 0 var(--space-2) 0;
border: 0;
border-bottom: 1px solid var(--hair);
background: transparent;
position: static;
box-shadow: none;
min-width: 0;
}
body.avg-money .av-table-scroll > table > tbody > tr > td:first-child::before { content: none; }
body.avg-money .av-table-scroll > table > tbody > tr > td:not(:first-child) {
display: grid;
grid-template-columns: minmax(96px, 38%) 1fr;
column-gap: var(--space-3);
padding: var(--space-3) 0 0 0;
border: 0;
border-top: 1px solid var(--hair-2);
background: transparent;
font-family: var(--body);
font-weight: 500;
font-size: 14.5px;
line-height: 1.5;
color: var(--ink);
position: static;
box-shadow: none;
min-width: 0;
}
body.avg-money .av-table-scroll > table > tbody > tr > td:not(:first-child)::before {
content: attr(data-label);
font-family: var(--display);
font-weight: 600;
font-size: 11.5px;
line-height: 1.35;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-3);
padding-top: 2px;
align-self: start;
}
body.avg-money .av-table-scroll::after { content: none; display: none; }
}
@media (min-width: 640px) and (max-width: 1023px) {
body.avg-money .av-table-scroll > table > tbody {
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
}
/* ==== END MOBILE-TABLE-CARDS 2026-08-26 (money-page half) ================= */