/* ==========================================================================
   IDV Pacific — Design Tokens   v1.0.0   (2026-06-11)
   THE single source of truth for visual design values on all landing pages.

   DO NOT edit values in your copy. Changes happen only here, go through
   branding/BRAND-GUIDE.md Appendix B (changelog) and must pass
   branding/contrast-gate.ps1 first.

   USAGE (every landing page):
   1. Add the class "idv-tokens" to your page root wrapper:
        <div class="xyz-landing idv-tokens"> ... </div>
   2. Paste this entire block UNCHANGED at the very top of your 3-css.txt.
   3. Reference tokens via var(--idv-...) — keep !important on the property
      as usual for Avada overrides:  color: var(--idv-c-text) !important;
   ========================================================================== */

.idv-tokens {
  /* ---- 1. Color primitives -------------------------------------------- */
  --idv-c-primary:         #0B5CD8;  /* IDV Blue — THE brand color: CTAs, links, eyebrows */
  --idv-c-primary-strong:  #0A4DB5;  /* hover / active of primary */
  --idv-c-ink:             #0A1322;  /* near-black navy — dark sections, hero */
  --idv-c-ink-2:           #101D33;  /* headings on light; ink gradient stop */
  --idv-c-text:            #46556E;  /* body text on light */
  --idv-c-muted:           #5D6B84;  /* meta, captions, secondary labels */
  --idv-c-surface:         #FFFFFF;  /* default section background */
  --idv-c-tint:            #F4F7FC;  /* alternate (light blue-grey) section background */
  --idv-c-well:            #E8F0FC;  /* icon wells, chips, soft blue fills */
  --idv-c-well-green:      #E2F8EF;  /* "verified / live" badge background */
  --idv-c-border:          #E3E9F2;  /* 1px borders, dividers */
  --idv-c-verified:        #00C580;  /* green — fills/dots ONLY (behind dark text); never icons/text on light */
  --idv-c-verified-text:   #077A53;  /* green as text OR icons/ticks on light backgrounds */
  --idv-c-verified-ink:    #04301F;  /* text placed ON a green fill */
  --idv-c-error:           #B42318;  /* form errors only */
  --idv-c-gold:            #B8860B;  /* award / certification accent (e.g. Gold VAR partner medal). Icons/large only on surface (3.26:1); never body text */
  --idv-c-gold-ondark:     #FFA50D;  /* warm amber-gold for award icons ON dark/ink backgrounds (e.g. the Gold VAR medal on the indigo pill); 5.9:1 on scan-primary */

  /* on-dark set — use ONLY on ink backgrounds */
  --idv-c-ondark-text:     #B8C4D6;  /* body text on ink */
  --idv-c-ondark-accent:   #6EA8FF;  /* links / eyebrows on ink */
  --idv-c-ondark-verified: #2EE6A6;  /* green checks / accents on ink */
  --idv-c-ondark-border:   rgba(255, 255, 255, 0.14);
  --idv-c-ondark-fill:     rgba(255, 255, 255, 0.06);

  /* ---- 1a2. SCANNERS PAGE accents (added v1.5.0) ----------------------
     Scanners LP ONLY, page-scoped. accent.css re-points --idv-c-primary* to
     scan-primary within .idvs-landing, so the Scanners page rebrands off master
     IDV blue to the Thales indigo (buttons/links/icons/cards + the verb highlight).
     scan-primary = Thales indigo (dark -> WHITE text, 11.7:1). scan-accent = teal
     for the "how readers work" alt card/wedge fill (LIGHT -> DARK ink text, 7.8:1). */
  --idv-c-scan-primary:        #292D7F;
  --idv-c-scan-primary-strong: #20235F;
  --idv-c-scan-accent:         #65BDCA;

  /* ---- 1b. PRODUCT ACCENT — FoxID (added v1.2.0) -----------------------
     FoxID is an IDV product with its own brand colour (foxid.com.au orange).
     SCOPE: FoxID pages only. The accent NEVER replaces --idv-c-primary for
     buttons/links/primary actions (those stay IDV blue) — it themes product
     decoration: eyebrow icons, stat numerals, icon wells, card hover/top
     accents, the comparison "featured" column, the hero scan-line + pill.
     Source hexes verified live: pixPrimary #FF7213, secondary #FFBB3D,
     coral #FF6C5F, tint #FFF3EB. All pairings pass contrast-gate.ps1. */
  --idv-c-foxid:         #FF7213;  /* primary orange — decorative FILLS (dark ink on top) */
  --idv-c-foxid-strong:  #C2540A;  /* hover / border-on-white safe (>=3:1) */
  --idv-c-foxid-well:    #FFF3EB;  /* pale tint — icon wells, featured column, pill/callout bg */
  --idv-c-foxid-text:    #B5400D;  /* readable orange — icons / small text / stat numerals on light */
  --idv-c-foxid-ondark:  #FFBB3D;  /* amber accent on ink (hero highlight, on-ink icons) */
  /* text ON a foxid fill = --idv-c-ink (#0A1322); icons inherit, so they stay in-gamut */

  /* ---- 1c. PRODUCT ACCENT — enrol (added v1.3.0) ----------------------
     enrol = no-code identity onboarding / workflow builder. SCOPE: enrol pages only.
     Decoration only (same rules as FoxID): NEVER primary/links/buttons (those stay IDV
     blue), NEVER replaces verified-green. Teal chosen as a blue-green deliberately
     distinct from verified #00C580 and from master blue. All pairings pass contrast-gate. */
  --idv-c-enrol:         #12B0A0;  /* teal — decorative FILLS (dark ink on top, 6.9:1) */
  --idv-c-enrol-strong:  #0C8579;  /* hover / border-on-white safe (>=3:1) */
  --idv-c-enrol-well:    #E4F7F3;  /* pale tint — icon wells, featured column, pill/callout bg */
  --idv-c-enrol-text:    #0E7167;  /* readable teal — icons / small text / stat numerals on light */
  --idv-c-enrol-ondark:  #45D6C5;  /* teal accent on ink (hero highlight, on-ink icons) */
  /* text ON an enrol fill = --idv-c-ink (#0A1322); icons inherit, staying in-gamut */

  /* ---- 1d. PRODUCT ACCENT — Hub Manager (added v1.3.0) ----------------
     Hub Manager = centralised multi-site device management. SCOPE: hub pages only.
     Violet, aligned to the product's established purple identity, WCAG-tuned. Decoration
     only; primary/links/buttons stay IDV blue. All pairings pass contrast-gate. */
  --idv-c-hub:           #8B6DF0;  /* violet — decorative FILLS (dark ink on top, 4.9:1) */
  --idv-c-hub-strong:    #6D45D9;  /* hover / border-on-white safe (>=3:1) */
  --idv-c-hub-well:      #F1ECFE;  /* pale tint */
  --idv-c-hub-text:      #6033C7;  /* readable violet — icons / small text on light */
  --idv-c-hub-ondark:    #B9A6FF;  /* violet accent on ink */
  /* text ON a hub fill = --idv-c-ink (#0A1322) */

  /* ---- 1e. PRODUCT — mDL (added v1.3.0) -------------------------------
     mDL = ISO 18013-5 mobile driver licence: the flagship "house" product. It rides the
     MASTER IDV blue rather than a separate accent (deliberate — see §6.20). These aliases
     exist only so product enumeration stays symmetric; they add NO new colour. No --idv-g-mdl. */
  --idv-c-mdl:           var(--idv-c-primary);
  --idv-c-mdl-strong:    var(--idv-c-primary-strong);
  --idv-c-mdl-well:      var(--idv-c-well);
  --idv-c-mdl-text:      var(--idv-c-primary);
  --idv-c-mdl-ondark:    var(--idv-c-ondark-accent);

  /* ---- 2. The ONLY approved gradients ---------------------------------- */
  --idv-g-ink:  linear-gradient(165deg, #101D33 0%, #0A1322 100%);
  --idv-g-glow: radial-gradient(ellipse at 18% 10%, rgba(11, 92, 216, 0.20) 0%, transparent 52%),
                radial-gradient(ellipse at 85% 92%, rgba(0, 197, 128, 0.07) 0%, transparent 50%);
  /* FoxID product signature (added v1.2.0). SCOPE: FoxID pages, DECORATIVE only
     (scan-line, stat underline, featured-panel top bar, hero pill) — never on
     body text, never a button. Dark ink (--idv-c-ink) on it passes AA throughout. */
  --idv-g-foxid: linear-gradient(90deg, #FF6C5F 0%, #FF7213 50%, #FFBB3D 100%);
  /* enrol + hub product signatures (added v1.3.0). SCOPE: that product's pages, DECORATIVE
     only (scan-line, stat underline, featured-panel top bar, hero pill) — never body text,
     never a button. All stops chosen light enough that dark ink (--idv-c-ink) on them passes AA. */
  --idv-g-enrol: linear-gradient(90deg, #12B0A0 0%, #2BC9B5 50%, #5BE0CB 100%);
  --idv-g-hub:   linear-gradient(90deg, #8B6DF0 0%, #A48BF5 50%, #B9A6FF 100%);

  /* ---- 3. Typography (Karla only) --------------------------------------
     Weights: 400 body · 500 emphasis · 700 subheads · 800 display/H2/eyebrow */
  --idv-font: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --idv-fs-display: 3rem;      /* hero h1        800, lh 1.12, ls -0.02em  */
  --idv-fs-h2:      2.25rem;   /* section h2     800, lh 1.16, ls -0.015em */
  --idv-fs-h3:      1.375rem;  /* card heading   700, lh 1.3               */
  --idv-fs-h4:      1.125rem;  /* minor heading  700, lh 1.35              */
  --idv-fs-lead:    1.125rem;  /* hero / section intro  400, lh 1.7        */
  --idv-fs-body:    1rem;      /* default        400, lh 1.65              */
  --idv-fs-small:   0.875rem;  /* meta, fine print      lh 1.55            */
  --idv-fs-eyebrow: 0.8125rem; /* caps label     800, uppercase, ls 0.08em */
  /* display sizes — big numerals (stat bands, prices) & pullquotes ONLY, never body */
  --idv-fs-stat:    2.5rem;    /* stat / price numeral  800, lh 1.05        */
  --idv-fs-quote:   1.5rem;    /* pullquote / testimonial  500, lh 1.5      */

  /* ---- 4. Radii ---------------------------------------------------------- */
  --idv-r-control: 10px;   /* buttons, inputs */
  --idv-r-card:    16px;   /* cards, panels, FAQ items */
  --idv-r-feature: 24px;   /* hero mockups, featured panels */
  --idv-r-pill:    999px;  /* pills, badges, chips */

  /* ---- 5. Shadows (only these two) --------------------------------------- */
  --idv-sh-card: 0 1px 2px rgba(16, 29, 51, 0.04), 0 8px 24px rgba(16, 29, 51, 0.07);
  --idv-sh-pop:  0 24px 60px rgba(10, 19, 34, 0.35);   /* hero mockups on ink only */

  /* ---- 6. Layout ---------------------------------------------------------- */
  --idv-container: 1200px;
  --idv-pad-x: 24px;
  --idv-sec-y: 96px;   /* vertical section padding */
}

/* Responsive token overrides — do NOT hand-tune sizes per page */
@media (max-width: 768px) {
  .idv-tokens {
    --idv-fs-display: 2.1rem;
    --idv-fs-h2: 1.75rem;
    --idv-fs-h3: 1.25rem;
    --idv-fs-stat: 2rem;
    --idv-fs-quote: 1.25rem;
    --idv-sec-y: 64px;
  }
}
@media (max-width: 480px) {
  .idv-tokens {
    --idv-pad-x: 16px;
  }
}


/* Blog index accent — the blog is a HOUSE page for IDV Pacific (the parent company,
   not a single product), so the accent IS the master IDV blue, with NO product
   gradient (same treatment as About / Contact / Legal / mDL / scanners).
   Maps the page-prefix aliases to the governed --idv-c-mdl* tokens (which resolve to
   the master --idv-c-primary*). 100% var() values, zero hexes except the on-fill white.
   Paste AFTER branding/tokens.css in the page's 3-css.txt.
   Page prefix: idvbl-   (root class: .idvbl-landing). */
.idvbl-landing {
  --idvbl-accent:        var(--idv-c-mdl) !important;
  --idvbl-accent-strong: var(--idv-c-mdl-strong) !important;
  --idvbl-accent-well:   var(--idv-c-mdl-well) !important;
  --idvbl-accent-text:   var(--idv-c-mdl-text) !important;
  --idvbl-accent-ink:    #FFFFFF !important;                 /* text/icon ON the blue (dark) fill = white */
  --idvbl-accent-ondark: var(--idv-c-mdl-ondark) !important;
  /* NOTE: no --idvbl-accent-grad — corporate/house page has no product gradient. */
}

/* ===========================================================================
   IDV Pacific - Blog index - Base styles
   Prefix: .idvbl-  ·  Built against branding/BRAND-GUIDE.md v1.5.0
   - All values come from branding/tokens.css (paste it above this in 3-css.txt).
   - The blog is a corporate / HOUSE page: the accent IS the master IDV blue. No
     separate hue, NO product gradient. Accent driven by --idvbl-accent* (accent.css).
     Primary links/CTAs stay IDV blue; green stays verified-only; hero + CTA stay ink.
   - Forked from pages/contact (same house treatment).

   THE CARD CLASS NAMES ARE NOT FREE CHOICES. .idvbl-post / __media / __media--img /
   __body / __cat / __link are emitted verbatim by the [idvlp_recent_posts] shortcode
   (class-idvlp-core.php render_recent_posts). script.js emits the same names plus
   __meta / __date / __read / __excerpt for the REST upgrade, so ONE stylesheet
   covers both the no-JS baseline and the upgraded feed. Do not rename them.

   DO NOT copy card CSS from pages/home. That page is pre-token: its card border,
   category label and media placeholder all use off-token literals (including the
   deprecated home-page blue and a bespoke two-stop gradient), every one of which is a
   lint-tokens.ps1 hard failure. Token equivalents are used below instead. The offending
   values are deliberately NOT quoted here: lint-tokens.ps1 does not skip comments, so
   naming a banned hex or gradient in prose fails the gate just as using it would.
   =========================================================================== */

/* Accent contract (defaults so the base is sane on its own; accent.css confirms
   these on .idvbl-landing — all resolve to the master blue). */
.idvbl-landing {
  --idvbl-accent:        var(--idv-c-primary);
  --idvbl-accent-strong: var(--idv-c-primary-strong);
  --idvbl-accent-well:   var(--idv-c-well);
  --idvbl-accent-text:   var(--idv-c-primary);   /* readable on light */
  --idvbl-accent-ink:    #FFFFFF;                /* text/icon ON a blue (dark) fill = white */
  --idvbl-accent-ondark: var(--idv-c-ondark-accent);
}

/* ---- Base -------------------------------------------------------------- */
.idvbl-landing {
  font-family: var(--idv-font) !important;
  font-size: var(--idv-fs-body) !important;
  line-height: 1.65 !important;
  color: var(--idv-c-text) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}
.idvbl-landing *, .idvbl-landing *::before, .idvbl-landing *::after { box-sizing: border-box !important; }
.idvbl-landing h1, .idvbl-landing h2, .idvbl-landing h3, .idvbl-landing h4, .idvbl-landing h5, .idvbl-landing h6 {
  font-family: var(--idv-font) !important; font-weight: 800 !important; line-height: 1.16 !important;
  margin: 0 0 1rem 0 !important; color: var(--idv-c-ink-2) !important;
}
.idvbl-landing p { margin: 0 0 1rem 0 !important; font-size: var(--idv-fs-body) !important; line-height: 1.65 !important; }
.idvbl-landing a { text-decoration: none !important; }
/* Every :not() here contributes its argument's specificity, so this selector is (0,5,1)
   and outranks any plain single-class colour rule on an anchor. ANY new anchor-styled
   button MUST be added to this exclusion chain, or it inherits primary blue as its text
   colour: .idvbl-side__btn is blue-on-blue (1.00:1, an invisible label) without it. */
.idvbl-landing a:not(.idvbl-btn):not(.idvbl-post):not(.idvbl-chip):not(.idvbl-pagebtn):not(.idvbl-side__btn) { color: var(--idv-c-primary) !important; }
.idvbl-landing img { max-width: 100% !important; height: auto !important; }
.idvbl-landing ul, .idvbl-landing ol { margin: 0 !important; padding: 0 !important; list-style: none !important; }

/* The [hidden] attribute must beat the component display rules below. Specificity
   (0,2,0) wins over a bare class, so order does not matter. */
.idvbl-landing [hidden] { display: none !important; }

/* Inline SVG icon */
.idvbl-landing .idvbl-ico {
  width: 1em !important; height: 1em !important; fill: currentColor !important;
  display: inline-block !important; vertical-align: -0.125em !important; flex-shrink: 0 !important;
}

/* Focus-visible ring (guide 6.16) */
.idvbl-landing a:focus-visible, .idvbl-landing button:focus-visible, .idvbl-landing input:focus-visible {
  outline: none !important; box-shadow: 0 0 0 3px rgba(11, 92, 216, 0.35) !important;
  border-radius: var(--idv-r-control) !important;
}
.idvbl-section--ink a:focus-visible, .idvbl-section--ink button:focus-visible,
.idvbl-hero a:focus-visible, .idvbl-hero button:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7) !important;
}

/* Container + sections */
.idvbl-container { max-width: var(--idv-container) !important; margin: 0 auto !important; padding: 0 var(--idv-pad-x) !important; }
.idvbl-section { padding: var(--idv-sec-y) 0 !important; background: var(--idv-c-surface) !important; position: relative !important; }
.idvbl-section.idvbl-section--tint { background: var(--idv-c-tint) !important; }
.idvbl-section.idvbl-section--ink { background: var(--idv-g-ink) !important; color: var(--idv-c-ondark-text) !important; }
.idvbl-section.idvbl-section--ink::before { content: '' !important; position: absolute !important; inset: 0 !important; background: var(--idv-g-glow) !important; pointer-events: none !important; }
.idvbl-section.idvbl-section--ink > * { position: relative !important; z-index: 1 !important; }
.idvbl-section.idvbl-section--ink h2, .idvbl-section.idvbl-section--ink h3, .idvbl-section.idvbl-section--ink h4 { color: #FFFFFF !important; }
.idvbl-section.idvbl-section--ink p { color: var(--idv-c-ondark-text) !important; }
/* ...but the ink paragraph colour must NOT leak into the WHITE form card sitting on the
   ink band. The rule above is (0,2,1) and beat the plain .idvbl-cta__form-note class,
   rendering that subtitle at 1.76:1 on white. These are (0,3,1) so they win outright.
   This also protects Contact Form 7, which wraps every field in its own <p>. */
.idvbl-landing .idvbl-section--ink .idvbl-cta__form p { color: var(--idv-c-text) !important; }
.idvbl-landing .idvbl-section--ink .idvbl-cta__form .idvbl-cta__form-note { color: var(--idv-c-muted) !important; }

/* Eyebrow label (guide 6.2) */
.idvbl-label {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  font-size: var(--idv-fs-eyebrow) !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: 0.08em !important;
  color: var(--idv-c-primary) !important; margin-bottom: 14px !important;
}
.idvbl-label--ondark, .idvbl-label--page { color: var(--idv-c-ondark-accent) !important; }

/* Section head */
.idvbl-sechead { margin-bottom: 36px !important; }
.idvbl-sechead h2 { font-size: var(--idv-fs-h2) !important; margin: 0 !important; }
.idvbl-sechead h2:focus { outline: none !important; }
.idvbl-sechead h2:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(11, 92, 216, 0.35) !important; border-radius: var(--idv-r-control) !important; }

/* ---- HERO (ink) --------------------------------------------------------- */
/* Compact page header, not a hero. With the featured band removed the brief is to reach
   the gallery quickly, and an eyebrow + one h1 + a two-line lead does not warrant a tall
   band: at 104/96 it put ~550px of near-empty canvas above the first article. */
.idvbl-hero {
  background: var(--idv-g-ink) !important; color: var(--idv-c-ondark-text) !important;
  padding: 64px 0 56px !important; position: relative !important; overflow: hidden !important;
}
.idvbl-hero::before { content: '' !important; position: absolute !important; inset: 0 !important; background: var(--idv-g-glow) !important; pointer-events: none !important; }
.idvbl-hero > * { position: relative !important; z-index: 1 !important; }
.idvbl-hero__inner { max-width: 760px !important; }
.idvbl-hero h1 { font-size: var(--idv-fs-display) !important; color: #FFFFFF !important; margin: 0 0 18px 0 !important; }
.idvbl-landing .idvbl-hero__lead { font-size: var(--idv-fs-lead) !important; color: var(--idv-c-ondark-text) !important; margin: 0 !important; }

/* ---- FEATURED LEAD POST (surface) -------------------------------------- */
/* ---- TWO-COLUMN BODY: sticky left rail + article grid -------------------
   Same shape as the legal pages' sticky table of contents (pages/legal
   .idvl-doc / .idvl-toc). The rail carries the topic filters and a promo card. */
/* align-items: STRETCH is what makes the rail sticky for the whole scroll. The aside
   then spans the full height of the article column, giving .idvbl-side__inner a tall
   containing block to travel through. With align-items:start the aside is only as tall
   as its own content, so a sticky child unsticks almost immediately. */
.idvbl-layout {
  display: grid !important; grid-template-columns: 268px minmax(0, 1fr) !important;
  gap: 48px !important; align-items: stretch !important;
}
/* The aside is a full-height grid item; the INNER wrapper is the sticky part, and it
   stays put for the entire scroll of the article grid. NO max-height and NO overflow,
   so the rail never grows its own scrollbar. The filter block sits at the top of the
   wrapper, so it is the part that remains visible even on a short viewport. */
.idvbl-side { align-self: stretch !important; }
.idvbl-side__inner {
  position: sticky !important; top: 96px !important;
  display: grid !important; gap: 16px !important;
}
/* In the no-JS baseline there are no topics to list, so the whole Topics block hides
   rather than presenting a heading, a rule and a footnote about counts nobody can see. */
.idvbl-side__block:has(.idvbl-chips[hidden]) { display: none !important; }
.idvbl-side__block {
  background: var(--idv-c-surface) !important; border: 1px solid var(--idv-c-border) !important;
  border-radius: var(--idv-r-card) !important; padding: 20px 18px !important;
  box-shadow: var(--idv-sh-card) !important;
}
.idvbl-landing .idvbl-side__title {
  display: flex !important; align-items: center !important; gap: 8px !important;
  font-size: var(--idv-fs-eyebrow) !important; font-weight: 800 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important;
  color: var(--idv-c-muted) !important; margin: 0 0 12px 0 !important;
}
.idvbl-side__title .idvbl-ico { color: var(--idv-c-primary) !important; font-size: 1rem !important; }

/* Promo card in the rail. Ink is a governed gradient and every pair here is on the
   approved list: white and ondark-text on ink, white on primary for the button. */
.idvbl-side__promo {
  background: var(--idv-g-ink) !important; border-radius: var(--idv-r-card) !important;
  padding: 24px 20px !important; color: var(--idv-c-ondark-text) !important;
  box-shadow: var(--idv-sh-card) !important;
}
.idvbl-side__promo-ico {
  font-size: 1.5rem !important; color: var(--idv-c-ondark-accent) !important;
  display: block !important; margin-bottom: 12px !important;
}
.idvbl-side__promo h3 { font-size: var(--idv-fs-h4) !important; color: #FFFFFF !important; margin: 0 0 8px 0 !important; }
.idvbl-side__promo p { font-size: var(--idv-fs-small) !important; color: var(--idv-c-ondark-text) !important; margin: 0 0 18px 0 !important; }
.idvbl-side__btn {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  background: var(--idv-c-primary) !important; color: #FFFFFF !important;
  font-size: var(--idv-fs-small) !important; font-weight: 700 !important;
  padding: 10px 18px !important; border-radius: var(--idv-r-control) !important;
  transition: background 0.2s ease, gap 0.2s ease !important;
}
.idvbl-side__btn:hover { background: var(--idv-c-primary-strong) !important; gap: 12px !important; }
.idvbl-landing a.idvbl-side__btn { color: #FFFFFF !important; }

/* ---- TOPIC FILTERS (vertical rail, legal-TOC treatment) ----------------- */
.idvbl-chips { display: grid !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; }
.idvbl-chip {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 10px !important; width: 100% !important; text-align: left !important;
  font-family: var(--idv-font) !important; font-size: var(--idv-fs-small) !important; font-weight: 600 !important;
  padding: 7px 8px 7px 12px !important;
  border: none !important; border-left: 2px solid var(--idv-c-border) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--idv-c-muted) !important; cursor: pointer !important;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
}
.idvbl-chip:hover { color: var(--idv-c-ink-2) !important; border-left-color: var(--idv-c-muted) !important; background: var(--idv-c-tint) !important; }
.idvbl-chip[aria-pressed="true"] {
  color: var(--idv-c-primary) !important; border-left-color: var(--idv-c-primary) !important;
  font-weight: 800 !important; background: var(--idv-c-well) !important;
}
.idvbl-chip__n { font-size: var(--idv-fs-eyebrow) !important; font-weight: 700 !important; color: var(--idv-c-muted) !important; }
.idvbl-chip[aria-pressed="true"] .idvbl-chip__n { color: var(--idv-c-primary) !important; }

/* ---- STATUS (aria-live) ------------------------------------------------- */
.idvbl-landing .idvbl-status {
  font-size: var(--idv-fs-small) !important; color: var(--idv-c-muted) !important;
  margin: 0 0 20px 0 !important; min-height: 1.4em !important;
}
/* Never reserve a band for a status that will never be written (the no-JS baseline). */
.idvbl-landing .idvbl-status:empty { display: none !important; }

/* ---- FEED GRID + CARD ---------------------------------------------------
   2-up, not 3-up: the sticky rail takes 268px + 48px gutter, leaving ~836px in the
   main column. Three cards there would be ~260px wide, too narrow for an image,
   title, meta and excerpt. PER_PAGE in script.js is a multiple of 2 to match. */
.idvbl-feed { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; }
.idvbl-post {
  display: flex !important; flex-direction: column !important;
  background: var(--idv-c-surface) !important;
  border: 1px solid var(--idv-c-border) !important;
  border-radius: var(--idv-r-card) !important;
  overflow: hidden !important;
  box-shadow: var(--idv-sh-card) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.idvbl-post:hover { transform: translateY(-5px) !important; box-shadow: var(--idv-sh-pop) !important; border-color: var(--idv-c-primary) !important; }
/* Placeholder tile for a post with no featured image. Deliberately LIGHT (well + primary
   glyph, an already-whitelisted pair at 4.64:1) rather than the ink gradient: at ink, a
   grid where several posts lack an image reads as a wall of dead near-black rectangles
   instead of an intentional empty state.
   MUST be !important: the plugin emits its real thumbnail as an inline background-image
   with !important (2.6.5+) precisely so it beats this. */
/* Placeholder and real thumbnail share ONE ratio. A shorter 16:7 empty tile was tried
   and discarded: it saves height, but any row mixing an image post with an image-less
   one then staggers the two titles by ~52px, and on the live blog most posts DO have an
   image, so mixed rows are the normal case. Uniform rows win. The wall-of-placeholder
   look in the preview is mock-data monotony, not a layout defect. */
.idvbl-post__media {
  aspect-ratio: 16 / 9 !important; background: var(--idv-c-well) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: var(--idv-c-primary) !important; font-size: 2rem !important;
  border-bottom: 1px solid var(--idv-c-border) !important;
}
.idvbl-post__media--img { aspect-ratio: 16 / 9 !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
.idvbl-post__body { padding: 22px 24px 24px !important; display: flex !important; flex-direction: column !important; flex: 1 !important; }
.idvbl-post__cat {
  font-size: var(--idv-fs-eyebrow) !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: 0.08em !important;
  color: var(--idv-c-primary) !important; margin-bottom: 10px !important;
}
.idvbl-post h3 { font-size: var(--idv-fs-h4) !important; line-height: 1.4 !important; margin: 0 0 12px 0 !important; }
.idvbl-post__meta {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 16px !important;
  font-size: var(--idv-fs-small) !important; color: var(--idv-c-muted) !important; margin-bottom: 12px !important;
}
.idvbl-post__meta span { display: inline-flex !important; align-items: center !important; gap: 7px !important; }
.idvbl-landing .idvbl-post__excerpt { font-size: var(--idv-fs-small) !important; color: var(--idv-c-text) !important; margin: 0 0 18px 0 !important; }
.idvbl-post__link {
  margin-top: auto !important; font-size: var(--idv-fs-small) !important; font-weight: 700 !important;
  color: var(--idv-c-primary) !important; display: inline-flex !important; align-items: center !important;
  gap: 7px !important; transition: gap 0.2s ease !important;
}
.idvbl-post:hover .idvbl-post__link { gap: 11px !important; }

/* Card entry animation. CSS-only so it also fires on the REST-injected cards,
   which are created after the observer in script.js would have run. */
@media (prefers-reduced-motion: no-preference) {
  .idvbl-post { animation: idvbl-rise 0.45s ease both !important; }
  .idvbl-post:nth-child(2) { animation-delay: 0.05s !important; }
  .idvbl-post:nth-child(3) { animation-delay: 0.10s !important; }
  .idvbl-post:nth-child(4) { animation-delay: 0.15s !important; }
  .idvbl-post:nth-child(5) { animation-delay: 0.20s !important; }
  .idvbl-post:nth-child(6) { animation-delay: 0.25s !important; }
  .idvbl-post:nth-child(7) { animation-delay: 0.30s !important; }
  .idvbl-post:nth-child(8) { animation-delay: 0.35s !important; }
  .idvbl-post:nth-child(9) { animation-delay: 0.40s !important; }
}
@keyframes idvbl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---- PAGER -------------------------------------------------------------- */
.idvbl-pager {
  display: flex !important; flex-wrap: wrap !important; justify-content: center !important;
  align-items: center !important; gap: 8px !important; margin: 44px 0 0 0 !important;
}
.idvbl-pagebtn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 8px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 14px !important;
  font-family: var(--idv-font) !important; font-size: var(--idv-fs-small) !important; font-weight: 700 !important;
  border-radius: var(--idv-r-control) !important; border: 1px solid var(--idv-c-border) !important;
  background: var(--idv-c-surface) !important; color: var(--idv-c-primary) !important;
  cursor: pointer !important; transition: background 0.2s ease, border-color 0.2s ease !important;
}
.idvbl-pagebtn:hover { border-color: var(--idv-c-primary) !important; background: var(--idv-c-well) !important; }
/* Order matters: these two selectors have equal specificity, so the CURRENT-page rule
   must come last. Previously the disabled rule won on a button carrying both, which
   inverted the pager: the current page rendered muted while the next page rendered blue. */
.idvbl-pagebtn[aria-disabled="true"] {
  color: var(--idv-c-muted) !important; cursor: default !important;
  background: var(--idv-c-surface) !important; border-color: var(--idv-c-border) !important;
}
.idvbl-pagebtn[aria-disabled="true"]:hover { border-color: var(--idv-c-border) !important; background: var(--idv-c-surface) !important; }
.idvbl-pagebtn[aria-current="page"] {
  background: var(--idv-c-primary) !important; color: #FFFFFF !important;
  border-color: var(--idv-c-primary) !important; cursor: default !important;
}
.idvbl-pagegap { color: var(--idv-c-muted) !important; padding: 0 4px !important; font-size: var(--idv-fs-small) !important; }

/* ---- CTA (ink) ---------------------------------------------------------- */
.idvbl-cta__inner { display: grid !important; grid-template-columns: 1fr 440px !important; gap: 56px !important; align-items: start !important; }
.idvbl-cta__content h2 { font-size: var(--idv-fs-h2) !important; margin: 0 0 14px 0 !important; }
.idvbl-landing .idvbl-cta__sub { font-size: var(--idv-fs-lead) !important; color: var(--idv-c-ondark-text) !important; margin: 0 0 28px 0 !important; }
.idvbl-cta__list { display: grid !important; gap: 16px !important; }
.idvbl-cta__list li {
  display: flex !important; align-items: flex-start !important; gap: 14px !important;
  color: var(--idv-c-ondark-text) !important; font-size: var(--idv-fs-body) !important; line-height: 1.55 !important;
}
.idvbl-cta__list li .idvbl-ico {
  flex-shrink: 0 !important; width: 36px !important; height: 36px !important; padding: 9px !important;
  border-radius: 14px !important; background: var(--idv-c-ondark-fill) !important;
  color: var(--idv-c-ondark-verified) !important;
}
.idvbl-cta__form {
  background: var(--idv-c-surface) !important; border-radius: var(--idv-r-feature) !important;
  padding: 32px !important; box-shadow: var(--idv-sh-pop) !important;
}
.idvbl-cta__form-title {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
  font-size: var(--idv-fs-h3) !important; font-weight: 800 !important; color: var(--idv-c-ink-2) !important;
  margin-bottom: 6px !important;
}
.idvbl-landing .idvbl-cta__form-note {
  font-size: var(--idv-fs-small) !important; color: var(--idv-c-muted) !important; text-align: center !important;
  margin: 0 0 22px 0 !important; padding-bottom: 18px !important; border-bottom: 1px solid var(--idv-c-border) !important;
}

/* CF7 + preview mock form share these field styles */
.idvbl-cta__form .wpcf7-form { margin: 0 !important; }
.idvbl-cta__form .wpcf7-form p { margin-bottom: 14px !important; }
.idvbl-cta__form .wpcf7-form-control-wrap { display: block !important; }
.idvbl-cta__form input[type="text"],
.idvbl-cta__form input[type="email"],
.idvbl-cta__form input[type="tel"],
.idvbl-cta__form textarea,
.idvbl-cta__form select,
.idvbl-field {
  width: 100% !important; padding: 13px 16px !important;
  border: 1px solid var(--idv-c-border) !important; border-radius: var(--idv-r-control) !important;
  font-family: var(--idv-font) !important; font-size: var(--idv-fs-body) !important;
  background: var(--idv-c-tint) !important; color: var(--idv-c-ink-2) !important;
  margin-bottom: 14px !important; transition: border-color 0.2s ease, background 0.2s ease !important;
}
/* The placeholder IS the only visible label on these fields, so it must clear AA. The
   UA default grey is ~3.5:1 on the tinted field. House convention (pages/header). */
.idvbl-landing .idvbl-cta__form input::placeholder,
.idvbl-landing .idvbl-cta__form textarea::placeholder,
.idvbl-landing .idvbl-field::placeholder { color: var(--idv-c-muted) !important; opacity: 1 !important; }
.idvbl-cta__form input:focus, .idvbl-cta__form textarea:focus, .idvbl-field:focus {
  outline: none !important; border-color: var(--idv-c-primary) !important; background: var(--idv-c-surface) !important;
}
.idvbl-cta__form input[type="submit"], .idvbl-cta__form .wpcf7-submit, .idvbl-submit {
  width: 100% !important; padding: 15px 22px !important; border: none !important;
  border-radius: var(--idv-r-control) !important; cursor: pointer !important;
  font-family: var(--idv-font) !important; font-size: var(--idv-fs-body) !important; font-weight: 700 !important;
  background: var(--idv-c-primary) !important; color: #FFFFFF !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}
.idvbl-cta__form input[type="submit"]:hover, .idvbl-cta__form .wpcf7-submit:hover, .idvbl-submit:hover {
  background: var(--idv-c-primary-strong) !important; transform: translateY(-2px) !important;
}
.idvbl-cta__form .wpcf7-not-valid-tip, .idvbl-cta__form .wpcf7-response-output {
  font-size: var(--idv-fs-small) !important; color: var(--idv-c-error) !important;
}

/* ---- Responsive (breakpoints 1024 / 768 / 480; type scale comes from tokens) ---- */
@media (max-width: 1024px) {
  /* Rail unsticks and stacks above the grid; the two blocks sit side by side while
     there is still room for them. */
  .idvbl-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
  .idvbl-side { align-self: start !important; }
  .idvbl-side__inner { position: static !important; top: auto !important; grid-template-columns: 1fr 1fr !important; align-items: start !important; gap: 20px !important; }
  .idvbl-feed { grid-template-columns: repeat(2, 1fr) !important; }
  /* Stacked: width now comes from the track, so aspect-ratio is safe again and the
     desktop min-height must be released or the media stays 360px tall. */
  /* Centre the form once the CTA stacks, or it strands ~460px of dead ink to its right. */
  .idvbl-cta__inner { grid-template-columns: 1fr !important; gap: 40px !important; justify-items: center !important; }
  .idvbl-cta__content { max-width: 640px !important; }
  .idvbl-cta__form { max-width: 560px !important; width: 100% !important; margin: 0 auto !important; }
}
@media (max-width: 768px) {
  .idvbl-hero { padding: 72px 0 64px !important; }
  /* The COLUMNS must be set on __inner: .idvbl-side is a grid ITEM, not a grid
     container, so grid-template-columns on it is a no-op and the 1fr 1fr from the
     1024 block survived all the way down, leaving the rail 2-up on phones. */
  .idvbl-side { max-width: 520px !important; margin: 0 auto !important; width: 100% !important; }
  .idvbl-side__inner { grid-template-columns: 1fr !important; }
  .idvbl-feed { grid-template-columns: 1fr !important; max-width: 520px !important; margin: 0 auto !important; }
  /* Featured title stays on the h2 step. Dropping it to h3 collapsed the hierarchy:
     tokens scale h3 to 1.25rem at this breakpoint, only 2px above the h4 grid titles. */
  .idvbl-sechead { margin-bottom: 28px !important; }
  /* Chips WRAP on narrow screens. A nowrap + overflow-x scroll rail was tried and
     discarded: the overflow probe correctly flags every chip past the viewport edge,
     and a scroll rail hides filters that people cannot see to scroll to. */
  .idvbl-chips { gap: 8px !important; }
  .idvbl-chip { padding: 8px 14px !important; }
  .idvbl-pager { margin-top: 32px !important; }
}
@media (max-width: 480px) {
  .idvbl-hero { padding: 56px 0 52px !important; }
  .idvbl-cta__form { padding: 24px 20px !important; }
  .idvbl-post__body { padding: 20px 20px 22px !important; }
  .idvbl-pagebtn { min-width: 40px !important; padding: 0 10px !important; }
}

/* ---- Avada / Fusion wrapper neutraliser -------------------------------- */
.fusion-fullwidth:has(.idvbl-landing),
.fusion-builder-row:has(.idvbl-landing),
.fusion-layout-column:has(.idvbl-landing),
.fusion-text:has(.idvbl-landing),
.post-content:has(.idvbl-landing) {
  padding-top: 0 !important; padding-bottom: 0 !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
}