/* 2026-09-14 - retired-template prune: 35 selectors removed from this file.
   Each named a class that exists nowhere - not on any of the 370 published
   URLs, not in any post_content/postmeta/option row in any status, not emitted
   by any theme PHP or JS. See the note at the top of style.css for the method
   and the verification. */
/* Vanity or Vice interior hardening — non-home routes only.
 * Keeps the homepage untouched while normalizing interior width, media,
 * overflow, contrast, and the nested Claire palette to the publication system.
 */

:root {
  /* House contract: interior is 90% bleed at every width. The upper bound is
     kept as a variable so the min() consumers below stay valid CSS, but it is
     set to the viewport so 90vw is always what applies. The old 96rem/72rem
     caps are retired — they were the narrow column coming back in. */
  --vov-interior-shell: 90vw;
  --vov-interior-max: 100vw;
  --vov-reading-measure: 100%;
}

/* Interior canvas: broad editorial field, never edge-to-edge. */
body:not(.home):not(.front-page),
body.fleet-bleed-interior,
body.fleet-bleed-draft {
  --vovn-shell: min(var(--vov-interior-shell), var(--vov-interior-max));
  --layout-shell: min(var(--vov-interior-shell), var(--vov-interior-max));
  --vov-bleed-interior: var(--vov-interior-shell);
}

body:not(.home):not(.front-page) main#main-content,
body:not(.home):not(.front-page) .vovn-shell,
body:not(.home):not(.front-page) .vovn-index,
body:not(.home):not(.front-page) .vovn-missing,
body:not(.home):not(.front-page) .cew-main,
body:not(.home):not(.front-page) .cew-shell {
  width: min(var(--vov-interior-shell), var(--vov-interior-max));
  max-width: min(var(--vov-interior-shell), var(--vov-interior-max));
  margin-inline: auto;
  box-sizing: border-box;
}

/* Children must respect the interior canvas rather than re-expanding to vw widths. */
body:not(.home):not(.front-page) .vov-landing {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

/* Reading copy stays generous without becoming a narrow centered strip. */
body:not(.home):not(.front-page) .vovn-prose,
body:not(.home):not(.front-page) .entry-content,
body:not(.home):not(.front-page) .cew-prose {
  width: 100%;
  max-width: min(var(--vov-reading-measure), 100%);
  margin-inline: 0;
  min-width: 0;
  box-sizing: border-box;
}



/* Hard overflow protection for long URLs, code, tables, embeds, and media. */
body:not(.home):not(.front-page) :where(h1,h2,h3,h4,h5,h6,p,li,a,figcaption,blockquote) {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ...but site chrome is not prose. The rule above also caught every link in the
   header, nav and footer, so on interior pages single-word labels were breaking
   mid-word — "Verdict/s", "Routine/s", "Abou/t". Navigation labels wrap between
   words or not at all. */
body:not(.home):not(.front-page) :where(header,nav,footer,.vv-hybrid,.vv-hybrid__pillars,.vv-hybrid__actions,.vv-hybrid-nav,.vv-hybrid-search,.vv-search-panel,.vv-breadcrumbs) :where(a,button,li,p,span) {
  overflow-wrap: normal;
}
body:not(.home):not(.front-page) .vv-hybrid__pillars > a {
  white-space: nowrap;
}
body:not(.home):not(.front-page) :where(figure,.wp-block-image,.wp-block-gallery,.wp-block-media-text,.wp-block-cover) {
  max-width: 100%;
  box-sizing: border-box;
}
body:not(.home):not(.front-page) :where(img,video,canvas,svg) {
  max-width: 100%;
  height: auto;
}
body:not(.home):not(.front-page) :where(iframe,embed,object) {
  max-width: 100%;
}
body:not(.home):not(.front-page) :where(.vovn-prose,.entry-content,.vvs-copy,.cew-prose) table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Progressive enhancement: theme.js wraps content tables in .vov-table-scroll.
 * Once wrapped, the wrapper owns the horizontal scroll and the table gets its
 * real display:table semantics back for screen readers. Unwrapped tables keep
 * the display:block fallback above, so there is no no-JS regression. */
body:not(.home):not(.front-page) .vov-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}
body:not(.home):not(.front-page) .vov-table-scroll > table {
  display: table;
  width: 100%;
  min-width: 34rem; /* keeps columns legible instead of crushing them */
  overflow-x: visible;
}
body:not(.home):not(.front-page) .vov-table-scroll:focus-visible {
  outline: 3px solid var(--color-support-bronze, currentColor);
  outline-offset: 2px;
}
body:not(.home):not(.front-page) :where(.vovn-prose,.entry-content,.vvs-copy,.cew-prose) pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
body:not(.home):not(.front-page) :where(.vovn-prose,.entry-content,.vvs-copy,.cew-prose) .alignwide,
body:not(.home):not(.front-page) :where(.vovn-prose,.entry-content,.vvs-copy,.cew-prose) .alignfull {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

/* Utility, trust, policy, and hub pages are not social-post surfaces. */
body.page .sharedaddy {
  display: none !important;
}

/* ==========================================================
   KEYBOARD PARITY FOR HOVER AFFORDANCES
   Audit result: no hover-only content reveals exist on this site — there is no
   `opacity:0` anywhere in the theme, and the header dropdowns are click-driven
   via aria-expanded + the hidden attribute. The brief's prohibition ("do not
   use hover as the only way to reveal important information") passes.
   What was missing is parity: several interactive elements changed appearance
   on hover but gave a keyboard user no equivalent signal. Each rule below
   mirrors an existing :hover state onto :focus-visible. Claire Elise Wellness
   selectors (.cew-*, .claire-*) are deliberately excluded — out of scope.
   ========================================================== */
.vvx-topics > div > a:focus-visible {
  background: var(--vvx-paper, var(--color-surface-page));
  color: var(--vvx-ink, var(--color-text-primary));
}
.vvx-topics > div > a:focus-visible h3 {
  color: var(--vvx-ink, var(--color-text-primary)) !important;
}
/* numeral kept its own colour on focus: #F7F0E7 on #F7F0E7 = 1:1 (invisible); #7E2938 = 8.21:1 */
.vvx-topics > div > a:focus-visible > span {
  color: #7E2938;
}
.vvx-card__body h3 a:focus-visible {
  text-decoration-color: currentColor;
}
.vv-pillar__more:focus-visible {
  color: var(--accent, var(--color-status-worth));
  border-color: var(--accent, var(--color-status-worth));
}

.vovn-sources a:focus-visible {
  color: var(--vovn-bronze, #c99668);
}
/* Any interactive element that lifts on hover should confirm focus visibly
   rather than only moving. Outline, not transform — movement is not a
   reliable focus signal and is suppressed under reduced-motion. */
.vvx-button:focus-visible,
.vv-btn:focus-visible {
  outline: 3px solid var(--color-support-bronze, #c99668);
  outline-offset: 3px;
}

/* Normalize article/post imagery without changing homepage artwork. */
body:not(.home):not(.front-page) :where(.vovn-prose,.entry-content,.vvs-copy,.cew-prose) figure img,
body:not(.home):not(.front-page) :where(.vovn-prose,.entry-content,.vvs-copy,.cew-prose) > img,
body:not(.home):not(.front-page) .wp-block-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
body:not(.home):not(.front-page) .wp-block-image.alignwide img,
body:not(.home):not(.front-page) .wp-block-image.alignfull img,
body:not(.home):not(.front-page) .vovn-index-image img {
  width: 100%;
}

/* Keep known dark surfaces explicitly readable. */
body:not(.home):not(.front-page) :where(.vovn-footer,.vovn-hub-editorial,.vovn-hub-cta,.vovn-route-next,.vovn-route-body>aside,.vvs-index,.vvs-visual-file,.vvs-next) {
  color: var(--vovn-porcelain);
}
body:not(.home):not(.front-page) :where(.vovn-footer,.vovn-hub-editorial,.vovn-hub-cta,.vovn-route-next,.vovn-route-body>aside,.vvs-index,.vvs-visual-file,.vvs-next) a {
  color: inherit;
}

/* Spa Intelligence uses a decorative hero background because its route runtime strips inline hero images. */
/* The .vvs-hero__media background image lived here. The element went with the
   rest of the .vvs-* spa template, and the matching "Spa hero" key was retired
   from the Site Images picker the same day. 2026-09-14. */

/* Claire remains a distinct information architecture, but uses Vanity's visual system. */
body.cew-mode {
  --cew-sand: var(--color-surface-page);
  --cew-white: var(--color-surface-page);
  --cew-charcoal: var(--color-surface-espresso);
  --cew-navy: var(--color-surface-ink);
  --cew-navy-soft: var(--color-support-cocoa);
  --cew-driftwood: var(--color-surface-stone);
  --cew-morning-fog: var(--color-surface-stone);
  --cew-coastal: var(--color-accent-brand);
  --cew-seaglass: var(--color-support-putty);
  --cew-warm-sand: var(--color-support-bronze);
  --cew-deep: var(--color-accent-brand);
  --cew-muted: var(--color-text-quiet);
  --cew-line: var(--color-border-line);
  --cew-display: var(--font-display);
  --cew-ui: var(--font-ui);
  --cew-shell: min(var(--vov-interior-shell), var(--vov-interior-max));
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
}
body.cew-mode .cew-masthead {
  background: color-mix(in srgb, var(--color-surface-page) 96%, transparent);
  border-bottom-color: var(--color-border-line);
}
body.cew-mode .cew-boundary {
  background: var(--color-surface-espresso);
  color: var(--color-text-on-dark);
}
body.cew-mode .cew-boundary a {
  color: var(--color-text-on-dark);
  text-decoration-thickness: .08em;
}

@media (max-width: 1024px) {
  :root { --vov-interior-shell: 92vw; }
}

@media (max-width: 768px) {
  :root { --vov-interior-shell: calc(100vw - 1.25rem); }
  body:not(.home):not(.front-page) main#main-content,
  body:not(.home):not(.front-page) .vovn-index,
  body:not(.home):not(.front-page) .vovn-missing,
  body:not(.home):not(.front-page) .cew-main,
  body:not(.home):not(.front-page) .cew-shell {
    width: var(--vov-interior-shell);
    max-width: var(--vov-interior-shell);
  }
  /* .vovn-shell nests INSIDE main, so it has to size against its own container, not
     the viewport. --vov-interior-shell is calc(100vw - 1.25rem), and 100vw also counts
     the scrollbar — that made the shell up to 56px wider than its own parent and
     scrolled six pages sideways at every width from 768px down to ~700px. */
  body:not(.home):not(.front-page) .vovn-shell {
    width: calc(100% - 1.25rem);
    max-width: calc(100% - 1.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.home):not(.front-page) *,
  body:not(.home):not(.front-page) *::before,
  body:not(.home):not(.front-page) *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  body:not(.home):not(.front-page) main#main-content,
  body:not(.home):not(.front-page) .vovn-shell,
  body:not(.home):not(.front-page) .cew-shell {
    width: 100%;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Final contrast contract — all Vanity or Vice / Claire surfaces
   --------------------------------------------------------------------------
   The theme has several route-specific stylesheets plus late component-token
   bindings. These rules intentionally live in the final hardening layer so a
   later page bundle cannot silently restore light-on-light or dark-on-dark.
   -------------------------------------------------------------------------- */
:root {
  --vov-contrast-ink: #151315;
  --vov-contrast-body: #5C5652;
  --vov-contrast-paper: #F7F0E7;
  --vov-contrast-white: #FFFFFF;
  --vov-contrast-gold: #C9A227;
}

/* Runtime repair attributes: highest-authority foreground only when measured
   contrast actually fails. */
html body [data-vov-contrast-fix="dark"] {
  color: var(--vov-contrast-ink) !important;
  -webkit-text-fill-color: var(--vov-contrast-ink) !important;
}
html body [data-vov-contrast-fix="light"] {
  color: var(--vov-contrast-paper) !important;
  -webkit-text-fill-color: var(--vov-contrast-paper) !important;
}
html body [data-vov-contrast-fix="white"] {
  color: var(--vov-contrast-white) !important;
  -webkit-text-fill-color: var(--vov-contrast-white) !important;
}

/* Known dark editorial surfaces. Descendants inherit the surface foreground so
   headings, links, small text, dt/dd, emphasis, and nested spans cannot fall
   back to the global ink color. */
:is(
  .vv-hero,
  .vv-split--dark,
  .vv-final,
  .vv-footer,
  .vovn-footer,
  .vovn-hub-editorial,
  .vovn-hub-cta,
  .vovn-route-next,
  .vovn-route-body > aside,
  .vvs-hero,
  .vvs-index,
  .vvs-visual-file,
  .vvs-next,
  .vvs-copy .vov-landing > section:nth-child(3),
  .vvs-copy .vov-landing > section:nth-child(5),
  .vvs-copy .vov-landing > section:nth-child(7),
  .vvs-copy .vov-cta,
  .cew-boundary
) {
  color: var(--vov-contrast-paper) !important;
}
:is(
  .vv-hero,
  .vv-split--dark,
  .vv-final,
  .vv-footer,
  .vovn-footer,
  .vovn-hub-editorial,
  .vovn-hub-cta,
  .vovn-route-next,
  .vovn-route-body > aside,
  .vvs-hero,
  .vvs-index,
  .vvs-visual-file,
  .vvs-next,
  .vvs-copy .vov-landing > section:nth-child(3),
  .vvs-copy .vov-landing > section:nth-child(5),
  .vvs-copy .vov-landing > section:nth-child(7),
  .vvs-copy .vov-cta,
  .cew-boundary
) :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,small,label,blockquote,figcaption,strong,em,a:not(.vv-btn):not(.vovn-btn):not(.cew-button):not(.vvs-button):not(.wp-element-button):not(.wp-block-button__link)) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Gold is reserved for intentional accent text on dark surfaces. */
:is(.vv-hero,.vv-split--dark,.vv-final,.vv-footer,.vovn-footer,.cew-boundary)
:is(.vv-kicker,.vv-mono,.vv-footer__house-label,dt) {
  color: var(--vov-contrast-gold) !important;
  -webkit-text-fill-color: var(--vov-contrast-gold) !important;
}

/* Known light editorial surfaces. */
:is(
  .vv-verdict-band,
  .vv-split--light,
  .vovn-route-body,
  .vovn-prose,
  .entry-content,
  .vvs-copy,
  .cew-prose,
  .cew-main
) {
  color: var(--vov-contrast-ink);
}
:is(.vv-verdict-band,.vv-split--light,.vovn-route-body,.vovn-prose,.entry-content,.vvs-copy,.cew-prose,.cew-main)
:is(h1,h2,h3,h4,h5,h6) {
  color: var(--vov-contrast-ink) !important;
  -webkit-text-fill-color: var(--vov-contrast-ink) !important;
}

/* Buttons own their foreground; inner spans/emphasis inherit it. */
.vv-btn--primary,
.vv-btn--ink,
.vv-btn--outline,
.vv-btn--ghost,
.cew-button {
  -webkit-text-fill-color: currentColor !important;
}
:is(.vv-btn--primary,.vv-btn--ink,.vv-btn--outline,.vv-btn--ghost,.vovn-btn,.cew-button) * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
.vv-btn--primary { color: var(--vov-contrast-ink) !important; }
.vv-btn--ink { color: var(--vov-contrast-paper) !important; }
.vv-btn--outline { color: var(--vov-contrast-ink) !important; }
.vv-split--dark .vv-btn--outline,
.vv-final .vv-btn--outline,
.vv-hero .vv-btn--outline { color: var(--vov-contrast-paper) !important; border-color: currentColor; }
.vv-btn--ghost { color: var(--vov-contrast-paper) !important; }
.vv-btn--ghost:hover,
.vv-btn--ghost:focus-visible { color: var(--vov-contrast-ink) !important; }
.vv-btn--outline:hover,
.vv-btn--outline:focus-visible { color: var(--vov-contrast-paper) !important; }
.vv-split--dark .vv-btn--outline:hover,
.vv-split--dark .vv-btn--outline:focus-visible,
.vv-final .vv-btn--outline:hover,
.vv-final .vv-btn--outline:focus-visible,
.vv-hero .vv-btn--outline:hover,
.vv-hero .vv-btn--outline:focus-visible { background: var(--vov-contrast-paper); color: var(--vov-contrast-ink) !important; }

/* Verdict/status chips are colored surfaces and therefore carry their own text. */
.vv-verdict-tag,
.vv-verdict-tag--worth,
.vv-verdict-tag--stop,
.vv-verdict-tag--insuff {
  color: var(--vov-contrast-white) !important;
  -webkit-text-fill-color: var(--vov-contrast-white) !important;
}

/* Gutenberg utility-pair guard for common semantic palette classes if page
   content introduces them later. */
:is(.has-black-background-color,.has-ink-background-color,.has-espresso-background-color,.has-field-background-color,.has-oxblood-background-color) {
  color: var(--vov-contrast-paper) !important;
}
:is(.has-black-background-color,.has-ink-background-color,.has-espresso-background-color,.has-field-background-color,.has-oxblood-background-color)
:is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,small,label,blockquote,figcaption,a:not(.wp-element-button):not(.wp-block-button__link)) {
  color: var(--vov-contrast-paper) !important;
  -webkit-text-fill-color: var(--vov-contrast-paper) !important;
}
:is(.has-white-background-color,.has-porcelain-background-color,.has-stone-background-color,.has-gold-background-color,.has-putty-background-color) {
  color: var(--vov-contrast-ink) !important;
}
:is(.has-white-background-color,.has-porcelain-background-color,.has-stone-background-color,.has-gold-background-color,.has-putty-background-color)
:is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,small,label,blockquote,figcaption,a:not(.wp-element-button):not(.wp-block-button__link)) {
  color: var(--vov-contrast-ink) !important;
  -webkit-text-fill-color: var(--vov-contrast-ink) !important;
}