@charset "UTF-8";
/*!
Theme Name:   ViralAccounts
Theme URI:    https://viralaccounts.com/
Author:       VEYYO Limited Partnership
Description:  Custom theme for ViralAccounts.com. No page builder, no Avada, no Fusion.
Version:      1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License:      Proprietary
Text Domain:  viralaccounts
*/

/* ==========================================================================
   CONTENTS
   01  Tokens
   02  Reset & base
   03  Typography
   04  Layout & measure
   05  Header & navigation
   06  Buttons
   07  Chips, badges, pills
   08  Cards
   09  Tables
   10  Panels
   11  Article
   12  Forms
   13  Footer
   14  WordPress core classes
   15  Utilities
   16  Accessibility & print
   ========================================================================== */


/* ==========================================================================
   01  TOKENS
   Every value used anywhere in the theme is declared here. Components below
   reference these only — never a raw hex, never a magic number.
   ========================================================================== */

:root {

  /* --- Brand ------------------------------------------------------------
     --va-blue is sampled from the logo artwork. It is a BACKGROUND colour
     carrying white text by brand decision. It is deliberately NOT used for
     body links or small text on white: at 2.5:1 against white it is not
     legible at text sizes. Use --va-link for anything that is read.        */
  --va-blue:            #5EA8EF;
  --va-blue-hover:      #4593E0;
  --va-blue-active:     #3581CE;
  --va-blue-tint:       #F3F8FE;   /* section / panel backgrounds           */
  --va-blue-tint-brd:   #DCEAF8;   /* border that pairs with the tint       */
  --va-blue-on-dark:    #9BDCFF;   /* brand accent legible on --va-ink      */

  /* --- Ink --------------------------------------------------------------
     Four steps. Anything below --va-ink-muted-lg is for 16px+ only.        */
  --va-ink:             #15202B;   /* headings, primary text    16.5:1      */
  --va-ink-body:        #2C3A48;   /* long-form body copy       12.4:1      */
  --va-ink-soft:        #3D4C5C;   /* nav, secondary UI          8.8:1      */
  --va-ink-muted:       #5A6B7B;   /* captions, meta             5.5:1      */
  --va-ink-muted-lg:    #6B7A89;   /* 16px+ ONLY                 4.4:1      */

  /* --- Link -------------------------------------------------------------- */
  --va-link:            #0378AC;   /* 4.9:1 on white                        */
  --va-link-hover:      #015F86;   /* 7.0:1 on white                        */

  /* --- Surface ----------------------------------------------------------- */
  --va-surface:         #FFFFFF;
  --va-surface-alt:     #F6F9FC;   /* alternating page sections             */
  --va-surface-stripe:  #FAFCFE;   /* zebra table rows                      */
  --va-dark:            #15202B;   /* utility bar, footer, short-answer     */
  --va-dark-line:       #2B3947;   /* divider inside dark surfaces          */
  --va-on-dark:         #C3CEDA;
  --va-on-dark-muted:   #AFBBCB;

  /* --- Line ---------------------------------------------------------------*/
  --va-line:            #E3EAF1;   /* default border                        */
  --va-line-soft:       #EDF2F7;   /* inside cards and tables               */
  --va-line-field:      #D5DFE9;   /* form control border                   */

  /* --- Status ------------------------------------------------------------ */
  --va-ok:              #04704F;   /* "verified", "escrow protected"  6.1:1 */
  --va-ok-bg:           #ECFAF4;

  /* --- Type -------------------------------------------------------------- */
  --va-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Helvetica, Arial, sans-serif;

  /* Fluid scale. min is the phone size, max the desktop size. */
  --va-fs-display:  clamp(2.125rem, 1.30rem + 3.60vw, 3.875rem); /* 34 → 62 */
  --va-fs-h1:       clamp(2.00rem,  1.45rem + 2.40vw, 3.250rem); /* 32 → 52 */
  --va-fs-h2:       clamp(1.5625rem,1.26rem + 1.35vw, 2.0625rem);/* 25 → 33 */
  --va-fs-h3:       clamp(1.125rem, 1.06rem + 0.28vw, 1.1875rem);/* 18 → 19 */
  --va-fs-lead:     clamp(1.0625rem,0.95rem + 0.50vw, 1.3125rem);/* 17 → 21 */
  --va-fs-body:     1.09375rem;   /* 17.5 — article body                    */
  --va-fs-ui:       0.90625rem;   /* 14.5 — nav, buttons                    */
  --va-fs-sm:       0.875rem;     /* 14                                     */
  --va-fs-xs:       0.8125rem;    /* 13 — meta, captions                    */
  --va-fs-label:    0.75rem;      /* 12 — eyebrow labels, uppercase         */

  --va-lh-tight:    1.04;
  --va-lh-heading:  1.12;
  --va-lh-body:     1.72;
  --va-lh-ui:       1.55;

  --va-ls-display:  -0.042em;
  --va-ls-h1:       -0.038em;
  --va-ls-h2:       -0.035em;
  --va-ls-h3:       -0.02em;
  --va-ls-label:     0.1em;

  --va-fw-regular:  400;
  --va-fw-medium:   500;
  --va-fw-semi:     600;
  --va-fw-bold:     700;
  --va-fw-black:    800;

  /* --- Space (4px base) --------------------------------------------------- */
  --va-s1:  0.25rem;   /*  4 */
  --va-s2:  0.5rem;    /*  8 */
  --va-s3:  0.75rem;   /* 12 */
  --va-s4:  1rem;      /* 16 */
  --va-s5:  1.25rem;   /* 20 */
  --va-s6:  1.5rem;    /* 24 */
  --va-s8:  2rem;      /* 32 */
  --va-s10: 2.75rem;   /* 44 */
  --va-s12: 3.25rem;   /* 52 */
  --va-s16: 4rem;      /* 64 */

  /* --- Radius ------------------------------------------------------------- */
  --va-r-sm:   9px;    /* small buttons, inputs   */
  --va-r-md:   10px;   /* buttons                 */
  --va-r-lg:   14px;   /* cards, tables           */
  --va-r-xl:   18px;   /* panels                  */
  --va-r-pill: 999px;

  /* --- Layout -------------------------------------------------------------
     --va-measure is the reading column. --va-wide is the "breakout" width
     used by quotes, tables, panels and CTAs. That narrow / wide / narrow
     rhythm is the signature of the article layout — keep it.               */
  --va-measure: 720px;
  --va-wide:    980px;
  --va-shell:   1240px;
  --va-gutter:  1.75rem;  /* 28 */

  /* --- Motion -------------------------------------------------------------- */
  --va-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --va-dur:  140ms;

  /* --- Controls ------------------------------------------------------------ */
  --va-tap: 44px;   /* minimum interactive target, never reduce */
}


/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--va-s16);
}

body {
  margin: 0;
  background: var(--va-surface);
  color: var(--va-ink);
  font-family: var(--va-font);
  font-size: 1rem;
  line-height: var(--va-lh-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Keep intrinsic ratio on the logo so the header never reflows on load. */
.va-logo { width: 200px; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--va-line);
  margin: var(--va-s8) 0;
}


/* ==========================================================================
   03  TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  margin: 0;
  color: var(--va-ink);
  font-weight: var(--va-fw-black);
  line-height: var(--va-lh-heading);
}

h1 { font-size: var(--va-fs-h1); letter-spacing: var(--va-ls-h1); line-height: 1.07; }
h2 { font-size: var(--va-fs-h2); letter-spacing: var(--va-ls-h2); }
h3 { font-size: var(--va-fs-h3); letter-spacing: var(--va-ls-h3); font-weight: var(--va-fw-bold); }

p  { margin: 0 0 var(--va-s5); }

a {
  color: var(--va-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--va-link-hover); }

strong { font-weight: var(--va-fw-bold); }

/* Eyebrow label — small uppercase kicker above a heading. */
.va-eyebrow {
  font-size: var(--va-fs-label);
  font-weight: var(--va-fw-bold);
  letter-spacing: var(--va-ls-label);
  color: var(--va-ink-muted);
  text-transform: uppercase;
}
.va-eyebrow--brand    { color: var(--va-link); }
.va-eyebrow--on-dark  { color: var(--va-blue); }

/* Display heading — article hero and homepage hero only. */
.va-display {
  font-size: var(--va-fs-display);
  letter-spacing: var(--va-ls-display);
  line-height: var(--va-lh-tight);
  font-weight: var(--va-fw-black);
}

/* Standfirst / deck under a display heading. */
.va-lead {
  font-size: var(--va-fs-lead);
  line-height: var(--va-lh-ui);
  color: #42566A;
}


/* ==========================================================================
   04  LAYOUT & MEASURE
   ========================================================================== */

.va-shell   { max-width: var(--va-shell);   margin-inline: auto; padding-inline: var(--va-gutter); }
.va-wide    { max-width: var(--va-wide);    margin-inline: auto; padding-inline: var(--va-gutter); }
.va-measure { max-width: var(--va-measure); margin-inline: auto; padding-inline: var(--va-gutter); }

.va-section      { padding-block: var(--va-s12); }
.va-section--alt { background: var(--va-surface-alt); border-block: 1px solid var(--va-line); }
.va-section--tint{ background: var(--va-blue-tint);   border-bottom: 1px solid var(--va-blue-tint-brd); }
.va-section--dark{ background: var(--va-dark); color: var(--va-on-dark-muted); }
.va-section--dark h2, .va-section--dark h3 { color: #FFFFFF; }

/* Auto-fitting grid. Set --min per instance; default suits listing cards. */
.va-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 290px), 100%), 1fr));
  gap: var(--va-s4);
}
.va-grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 230px), 100%), 1fr)); }

/* Row that wraps to a stack on narrow screens. The 999 flex-grow keeps the
   content column dominant until it genuinely cannot fit. */
.va-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--va-s6);
  align-items: center;
}
.va-row__main { flex: 999 1 420px; min-width: 0; }
.va-row__side { flex: 1 1 280px;  min-width: 0; }

.va-stack { display: flex; flex-direction: column; gap: var(--va-s4); }


/* ==========================================================================
   05  HEADER & NAVIGATION
   ========================================================================== */

/* Utility bar above the header. */
.va-utility {
  background: var(--va-dark);
  color: var(--va-on-dark);
  font-size: var(--va-fs-xs);
}
.va-utility__inner {
  display: flex; flex-wrap: wrap; gap: var(--va-s4);
  justify-content: space-between;
  padding-block: var(--va-s2);
}

.va-header { border-bottom: 1px solid var(--va-line); background: var(--va-surface); }
.va-header__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--va-s5);
  padding-block: 0.875rem;
}
.va-header__brand { margin-right: auto; display: flex; align-items: center; text-decoration: none; }

.va-nav { display: flex; flex-wrap: wrap; gap: var(--va-s5); }

/* wp_nav_menu emits a <ul>; flatten it so the nav reads as a plain row
   while keeping the list semantics for assistive tech. */
.va-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--va-s5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.va-nav__list li { margin: 0; }

.va-nav a {
  color: var(--va-ink-soft);
  font-size: var(--va-fs-ui);
  font-weight: var(--va-fw-medium);
  text-decoration: none;
}
.va-nav a:hover          { color: var(--va-ink); }

/* --- Dropdowns -----------------------------------------------------------
   Opened on hover AND on :focus-within, so the whole tree is reachable by
   keyboard without any JavaScript. A parent whose href is "#" is a label,
   not a destination — the panel is the destination.                        */

.va-nav__list li { position: relative; }

.va-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: calc(var(--va-s3) * -1);
  z-index: 60;
  min-width: 230px;
  margin: 0;
  padding: var(--va-s2) 0;
  list-style: none;
  background: var(--va-surface);
  border: 1px solid var(--va-line);
  border-radius: var(--va-r-lg);
  box-shadow: 0 10px 28px rgba(21, 32, 43, 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--va-dur) var(--va-ease),
              transform var(--va-dur) var(--va-ease),
              visibility var(--va-dur);
}

.va-nav__list li:hover > .sub-menu,
.va-nav__list li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Second level opens to the side. */
.va-nav__list .sub-menu .sub-menu { top: calc(var(--va-s2) * -1); left: 100%; }

.va-nav__list .sub-menu a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--va-s4);
  font-size: var(--va-fs-sm);
  font-weight: var(--va-fw-medium);
  color: var(--va-ink-soft);
  white-space: nowrap;
}
.va-nav__list .sub-menu a:hover { background: var(--va-blue-tint); color: var(--va-ink); }

/* Caret on anything with children. */
.va-nav__list .menu-item-has-children > a::after {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0.55;
}
.va-nav__list .sub-menu .menu-item-has-children > a::after {
  margin-left: auto;
  transform: rotate(-45deg);
}
.va-nav__list > li.menu-item-has-children > a { display: inline-flex; align-items: center; }
.va-nav .current-menu-item > a,
.va-nav a[aria-current]  { color: var(--va-ink); font-weight: var(--va-fw-bold); }

/* --- Mobile navigation ---------------------------------------------------
   The toggle is hidden above 860px, where the nav sits inline. Below it the
   nav collapses and is opened by assets/js/nav.js, which flips
   aria-expanded on the button and hidden on the panel. With JS off the
   panel stays visible — degraded, but never unreachable.                   */

.va-nav-toggle { display: none; }

@media (max-width: 860px) {
  .va-header__inner { gap: var(--va-s3); }

  .va-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--va-s2);
    min-height: var(--va-tap);
    min-width: var(--va-tap);
    padding-inline: var(--va-s3);
    margin-left: auto;
    border: 1px solid var(--va-line-field);
    border-radius: var(--va-r-sm);
    background: var(--va-surface);
    color: var(--va-ink);
    font-size: var(--va-fs-ui);
    font-weight: var(--va-fw-semi);
    cursor: pointer;
  }
  .va-nav-toggle__bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
  .va-nav-toggle__bars::before,
  .va-nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
  .va-nav-toggle__bars::before { top: -6px; }
  .va-nav-toggle__bars::after  { top:  6px; }
  .va-nav-toggle[aria-expanded="true"] .va-nav-toggle__bars { background: transparent; }
  .va-nav-toggle[aria-expanded="true"] .va-nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
  .va-nav-toggle[aria-expanded="true"] .va-nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

  .va-nav,
  .va-nav__list {
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
  }
  .va-nav {
    padding-block: var(--va-s2);
    border-top: 1px solid var(--va-line);
  }
  .va-nav[hidden] { display: none; }
  .va-nav a {
    display: flex;
    align-items: center;
    min-height: var(--va-tap);
    font-size: 1rem;
  }

  /* On a phone a hover dropdown is unusable, so submenus become a plain
     indented list that is always open. Less slick, always reachable. */
  .va-nav__list .sub-menu,
  .va-nav__list .sub-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0 0 0 var(--va-s4);
    padding: 0;
    border: 0;
    border-left: 1px solid var(--va-line);
    border-radius: 0;
    box-shadow: none;
  }
  .va-nav__list .sub-menu a { font-size: 0.9375rem; white-space: normal; }
  .va-nav__list .menu-item-has-children > a::after { display: none; }

  /* Header CTA drops onto its own full-width row. */
  .va-header__cta { flex-basis: 100%; }
  .va-header__cta .va-btn { width: 100%; }

  /* The utility bar is the first thing to go on a phone. */
  .va-utility { display: none; }
}

.va-breadcrumb { font-size: var(--va-fs-xs); color: var(--va-ink-muted); }
.va-breadcrumb a { text-decoration: none; }
.va-breadcrumb span[aria-hidden] { padding-inline: 0.4375rem; }


/* ==========================================================================
   06  BUTTONS
   .va-btn            outline / secondary
   .va-btn--primary   brand blue fill, white label
   .va-btn--ink       near-black fill
   ========================================================================== */

.va-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--va-tap);
  padding-inline: var(--va-s5);
  border: 1.5px solid var(--va-blue);
  border-radius: var(--va-r-md);
  background: transparent;
  color: #0A4F6E;
  font-size: var(--va-fs-ui);
  font-weight: var(--va-fw-bold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--va-dur) var(--va-ease),
              border-color     var(--va-dur) var(--va-ease),
              color            var(--va-dur) var(--va-ease);
}
.va-btn:hover { background: var(--va-blue-tint); color: #083D56; }

.va-btn--primary {
  border-color: var(--va-blue);
  background: var(--va-blue);
  color: #FFFFFF;
}
.va-btn--primary:hover  { background: var(--va-blue-hover); border-color: var(--va-blue-hover); color: #FFFFFF; }
.va-btn--primary:active { background: var(--va-blue-active); border-color: var(--va-blue-active); }

.va-btn--ink {
  border-color: var(--va-ink);
  background: var(--va-ink);
  color: #FFFFFF;
}
.va-btn--ink:hover { background: #0B131B; color: #FFFFFF; }

.va-btn--lg    { min-height: 52px; padding-inline: var(--va-s6); font-size: 0.96875rem; }
.va-btn--sm    { min-height: 42px; padding-inline: var(--va-s4); border-radius: var(--va-r-sm); }
.va-btn--block { width: 100%; }

.va-btn[aria-disabled="true"], .va-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}


/* ==========================================================================
   07  CHIPS, BADGES, PILLS
   ========================================================================== */

/* align-self stops a chip stretching to full width when it is a direct
   child of a column flex container such as .va-stack. */
.va-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--va-r-pill);
  background: #F1F5F9;
  color: var(--va-ink-soft);
  font-size: 0.78125rem;
  font-weight: var(--va-fw-semi);
}
.va-chip--brand { background: var(--va-blue); color: #FFFFFF; letter-spacing: 0.06em; font-weight: var(--va-fw-bold); }

/* Trust marker: "Verified", "Escrow protected". */
.va-flag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--va-s1);
  color: var(--va-ok);
  font-size: 0.78125rem;
  font-weight: var(--va-fw-semi);
}
.va-flag svg { flex: 0 0 auto; }

/* Tappable pill — the "In this article" nav. */
.va-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-inline: var(--va-s3);
  border: 1px solid #DCE5EE;
  border-radius: var(--va-r-pill);
  color: var(--va-ink);
  font-size: var(--va-fs-sm);
  font-weight: var(--va-fw-medium);
  text-decoration: none;
}
.va-pill:hover { border-color: var(--va-blue); background: var(--va-blue-tint); color: var(--va-ink); }

.va-pillbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5625rem;
  padding-block: var(--va-s4);
  border-bottom: 1px solid var(--va-line);
}


/* ==========================================================================
   08  CARDS
   ========================================================================== */

.va-card {
  border: 1px solid var(--va-line);
  border-radius: var(--va-r-lg);
  background: var(--va-surface);
  padding: var(--va-s5);
  display: flex;
  flex-direction: column;
  gap: var(--va-s3);
}
.va-card--link { text-decoration: none; color: inherit; transition: border-color var(--va-dur) var(--va-ease); }
.va-card--link:hover { border-color: var(--va-blue); color: inherit; }

/* Horizontal card — author box, media object. .va-card sets column
   direction, so this modifier is required; do NOT combine .va-card with
   .va-row, they fight over flex-direction. */
.va-card--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--va-s4);
}

.va-card__title { font-size: 1.09375rem; font-weight: var(--va-fw-bold); letter-spacing: var(--va-ls-h3); line-height: 1.3; }
.va-card__meta  { font-size: var(--va-fs-xs); color: var(--va-ink-muted); }

/* Listing card — the stat strip and price row. */
.va-stats {
  display: flex;
  gap: var(--va-s5);
  padding-block: var(--va-s3);
  border-block: 1px solid var(--va-line-soft);
}
.va-stat       { display: flex; flex-direction: column; gap: 1px; }
.va-stat__k    { font-size: 0.71875rem; color: var(--va-ink-muted); }
.va-stat__v    { font-size: 0.9375rem;  font-weight: var(--va-fw-semi); }

.va-price {
  font-size: 1.4375rem;
  font-weight: var(--va-fw-black);
  letter-spacing: -0.03em;
}
.va-price--muted { color: var(--va-ink-muted); }


/* ==========================================================================
   09  TABLES
   ========================================================================== */

/* Wrapper keeps a wide table scrollable instead of breaking the layout. */
.va-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--va-line);
  border-radius: var(--va-r-lg);
  -webkit-overflow-scrolling: touch;
}
.va-table { min-width: 660px; font-size: 0.9375rem; }
.va-table thead th {
  background: var(--va-blue);
  color: #FFFFFF;
  padding: 0.875rem 1.125rem;
  font-size: var(--va-fs-xs);
  font-weight: var(--va-fw-bold);
  letter-spacing: 0.05em;
  text-align: left;
}
.va-table tbody td { padding: 0.9375rem 1.125rem; border-top: 1px solid var(--va-line-soft); }
.va-table tbody tr:nth-child(even) { background: var(--va-surface-stripe); }
.va-table .is-num { text-align: right; }
.va-table caption {
  caption-side: bottom;
  padding: 0.8125rem 1.125rem;
  font-size: var(--va-fs-xs);
  line-height: 1.5;
  color: var(--va-ink-muted);
  text-align: left;
}


/* ==========================================================================
   10  PANELS
   ========================================================================== */

/* Tinted panel — inline CTAs, soft callouts. */
.va-panel {
  border: 1px solid var(--va-blue-tint-brd);
  background: var(--va-blue-tint);
  border-radius: var(--va-r-xl);
  padding: var(--va-s8) 1.875rem;
}

/* Dark panel — the "short answer" block. One per page, maximum.
   It is the single highest-contrast moment; more than one and it stops
   reading as the answer. */
.va-panel--dark {
  background: var(--va-dark);
  border-color: var(--va-dark);
  color: #FFFFFF;
}
.va-panel--dark .va-lead { color: #FFFFFF; }
.va-panel--dark p        { color: #FFFFFF; }
.va-panel--dark .va-hl   { color: var(--va-blue-on-dark); }

/* Key/value row inside the dark panel. */
.va-keyrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: var(--va-s6);
  padding-top: var(--va-s2);
  border-top: 1px solid var(--va-dark-line);
}
.va-keyrow__k { font-size: 1.625rem; font-weight: var(--va-fw-black); letter-spacing: -0.03em; color: var(--va-blue); }
.va-keyrow__v { font-size: var(--va-fs-sm); line-height: 1.5; color: var(--va-on-dark-muted); }

/* Numbered process steps. */
.va-steps { margin: 0; padding: 0; list-style: none; }
.va-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--va-blue);
  color: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: var(--va-fw-black);
}


/* ==========================================================================
   11  ARTICLE
   ========================================================================== */

.va-article p,
.va-article li {
  font-size: var(--va-fs-body);
  line-height: var(--va-lh-body);
  color: var(--va-ink-body);
}
.va-article h2 { margin-block: var(--va-s10) var(--va-s4); }
.va-article h3 { margin-block: var(--va-s6) 0.5625rem; }
.va-article ul,
.va-article ol { margin: 0 0 var(--va-s6); padding-left: 1.375rem; display: flex; flex-direction: column; gap: 0.8125rem; }

/* Numbered H2 — the oversized blue numeral beside a section heading. */
.va-h2num { display: flex; align-items: baseline; gap: var(--va-s4); }
.va-h2num__n {
  flex: 0 0 auto;
  font-size: 3.375rem;
  font-weight: var(--va-fw-black);
  letter-spacing: -0.05em;
  line-height: 0.8;
  color: var(--va-blue);
}

/* Drop cap — first paragraph of the article body only. */
.va-dropcap::first-letter {
  float: left;
  font-size: 4.25rem;
  line-height: 0.78;
  font-weight: var(--va-fw-black);
  letter-spacing: -0.04em;
  color: var(--va-blue);
  padding: 4px 12px 0 0;
}

/* Pull quote. Sits at --va-wide, breaking out of the reading measure. */
.va-quote {
  margin: 0;
  padding-block: 2.125rem;
  border-top: 3px solid var(--va-blue);
  border-bottom: 1px solid var(--va-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--va-s6);
  align-items: flex-start;
}
.va-quote__mark {
  flex: 0 0 auto;
  font-size: 5.375rem;
  line-height: 0.62;
  font-weight: var(--va-fw-black);
  color: var(--va-blue);
}
.va-quote blockquote { margin: 0; flex: 999 1 420px; min-width: 0; }
.va-quote p {
  margin: 0 0 var(--va-s3);
  font-size: clamp(1.3125rem, 1.00rem + 1.35vw, 1.8125rem);
  line-height: 1.32;
  font-weight: var(--va-fw-bold);
  letter-spacing: -0.028em;
  color: var(--va-ink);
}
.va-quote figcaption { font-size: var(--va-fs-sm); color: var(--va-ink-muted); }

/* Byline. */
.va-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem; }
.va-avatar { width: 42px; height: 42px; border-radius: 50%; background: #D6E6F8; flex: 0 0 auto; object-fit: cover; }
.va-avatar--lg { width: 54px; height: 54px; }

/* FAQ list. Pair with FAQPage schema in the template. */
.va-faq__item {
  padding-block: var(--va-s5);
  border-top: 1px solid var(--va-line);
  display: flex; flex-direction: column; gap: 0.4375rem;
}
.va-faq__item:last-child { border-bottom: 1px solid var(--va-line); }
.va-faq__q { font-size: 1.09375rem; font-weight: var(--va-fw-bold); letter-spacing: -0.015em; }
.va-faq__a { margin: 0; font-size: 1rem; line-height: 1.65; color: #42566A; }


/* ==========================================================================
   12  FORMS
   ========================================================================== */

.va-field { display: flex; flex-direction: column; gap: var(--va-s1); }
.va-label {
  font-size: 0.75rem;
  font-weight: var(--va-fw-semi);
  letter-spacing: 0.05em;
  color: var(--va-ink-soft);
}

.va-input, .va-select, .va-textarea {
  min-height: var(--va-tap);
  padding: 0 0.6875rem;
  border: 1px solid var(--va-line-field);
  border-radius: var(--va-r-sm);
  background: var(--va-surface);
  color: var(--va-ink);
  font-size: var(--va-fs-ui);
}
.va-textarea { padding-block: var(--va-s3); min-height: 120px; line-height: 1.6; }
.va-input::placeholder, .va-textarea::placeholder { color: var(--va-ink-muted-lg); }

.va-input:hover, .va-select:hover, .va-textarea:hover { border-color: #BFCDDC; }

/* Filter bar — the search row on the listings page. */
.va-filters {
  display: flex; flex-wrap: wrap; gap: 0.5625rem;
  padding: var(--va-s3);
  border: 1px solid var(--va-line);
  border-radius: var(--va-r-lg);
  background: var(--va-surface);
}
.va-filters .va-field { flex: 1 1 170px; }

.va-help { font-size: var(--va-fs-xs); line-height: 1.5; color: var(--va-ink-muted); }
.va-error { color: #A3161B; font-size: var(--va-fs-xs); }


/* ==========================================================================
   13  FOOTER
   ========================================================================== */

.va-footer {
  background: var(--va-dark);
  color: var(--va-on-dark-muted);
}
.va-footer__inner {
  display: flex; flex-wrap: wrap; gap: var(--va-s6);
  justify-content: space-between; align-items: center;
  padding-block: var(--va-s8);
  font-size: var(--va-fs-xs);
}
.va-footer a { color: var(--va-blue); }
.va-footer a:hover { color: var(--va-blue-on-dark); }


/* --- Pagination ---------------------------------------------------------- */

.va-pagination { margin-top: var(--va-s10); }
.va-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--va-s2);
  align-items: center;
  justify-content: center;
}
.va-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--va-tap);
  min-height: var(--va-tap);
  padding-inline: var(--va-s3);
  border: 1px solid var(--va-line);
  border-radius: var(--va-r-sm);
  color: var(--va-ink);
  font-size: var(--va-fs-ui);
  font-weight: var(--va-fw-semi);
  text-decoration: none;
}
.va-pagination .page-numbers:hover { border-color: var(--va-blue); background: var(--va-blue-tint); }
.va-pagination .page-numbers.current {
  background: var(--va-blue);
  border-color: var(--va-blue);
  color: #FFFFFF;
}
.va-pagination .page-numbers.dots { border-color: transparent; }


/* ==========================================================================
   14  WORDPRESS CORE CLASSES
   Maps the editorial breakout rhythm onto Gutenberg's alignment system, so
   an editor writing a post gets the same narrow / wide / full behaviour
   without touching CSS.
   ========================================================================== */

.va-article > *            { max-width: var(--va-measure); margin-inline: auto; }
.va-article > .alignwide   { max-width: var(--va-wide); }
.va-article > .alignfull   { max-width: none; width: 100%; }

.alignleft  { float: left;  margin: var(--va-s1) var(--va-s5) var(--va-s4) 0; }
.alignright { float: right; margin: var(--va-s1) 0 var(--va-s4) var(--va-s5); }
.aligncenter{ margin-inline: auto; display: block; }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption {
  font-size: var(--va-fs-xs);
  line-height: 1.5;
  color: var(--va-ink-muted);
  margin-top: var(--va-s2);
}

.sticky { /* pinned post — styled in the template, not here */ }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: var(--va-s3); left: var(--va-s3);
  width: auto; height: auto;
  padding: var(--va-s3) var(--va-s4);
  clip: auto; clip-path: none;
  background: var(--va-ink);
  color: #FFFFFF;
  border-radius: var(--va-r-sm);
  z-index: 100;
}


/* ==========================================================================
   15  UTILITIES
   ========================================================================== */

.va-hl        { color: var(--va-blue-on-dark); }
.va-muted     { color: var(--va-ink-muted); }
.va-nowrap    { white-space: nowrap; }
.va-mt-0      { margin-top: 0; }
.va-mb-0      { margin-bottom: 0; }
.va-push      { margin-right: auto; }
.va-center    { text-align: center; }

/* Numeric columns line up when figures use tabular digits. */
.va-tnum { font-variant-numeric: tabular-nums; }


/* ==========================================================================
   16  ACCESSIBILITY & PRINT
   ========================================================================== */

/* One visible focus style for everything. Never remove it — the brand blue
   alone does not carry enough contrast to serve as a focus indicator. */
:focus-visible {
  outline: 3px solid #0A4F6E;
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Forced-colours (Windows high contrast): let the OS palette through, but
   keep button shapes legible. */
@media (forced-colors: active) {
  .va-btn, .va-card, .va-panel { border: 1px solid ButtonBorder; }
}

@media print {
  .va-utility, .va-header, .va-footer, .va-pillbar, .va-btn { display: none !important; }
  body { color: #000; }
  .va-article > *, .va-measure, .va-wide, .va-shell { max-width: none; padding-inline: 0; }
  .va-article p, .va-article li { font-size: 11pt; line-height: 1.5; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}