/* =============================================================
   VETQUIZ DESIGN SYSTEM
   vetquiz-design-system.css
   
   INSTRUCTIONS FOR DESIGNER
   ──────────────────────────
   1. Add this file to your child theme folder
   2. Enqueue it AFTER vetquiz-master.css in functions.php
      (it overrides the old tokens and button colors)
   3. All brand changes start here — one edit updates the
      entire site. No need to hunt through multiple files.
   
   FILE MAP
   ──────────────────────────
   §1  Brand Tokens (colors, fonts, spacing, shadows)
   §2  Typography
   §3  Buttons  (Primary / Secondary / Outline / Danger)
   §4  Cards
   §5  Form Fields
   §6  Progress Bar
   §7  Disclaimer / Info Cards  (replaces red band)
   §8  Navigation
   §9  Footer
   §10 Utility Classes
   ============================================================= */


/* ── §1 BRAND TOKENS ──────────────────────────────────────── */
/*
   PRIMARY COLORS (confirmed by client April 2026)
   ─────────────────────────────────────────────────
   Red    #AC252D   — danger & errors ONLY, never decoration
   Navy   #2A2E6D   — primary brand, headers, nav, UI chrome
   Gold   #F9C533   — primary CTAs, highlights, active states
   Accent #6c7ce7   — links, progress bars, focus rings

   NEVER use red as a background color on full-width bands.
   NEVER use gold as body text on white — contrast fails WCAG AA.
*/

:root {

  /* ── Brand ─────────────────────────────────────────────── */
  --vq-red:              #AC252D;
  --vq-red-dark:         #8b1c23;
  --vq-red-bg:           #fdf2f2;   /* light red for error backgrounds */

  --vq-navy:             #2A2E6D;
  --vq-navy-dark:        #1e2150;   /* hover/active state */
  --vq-navy-mid:         #4a4f8a;   /* secondary UI, subdued elements */
  --vq-navy-bg:          #e8eafd;   /* lightest navy tint, card backgrounds */

  --vq-gold:             #F9C533;
  --vq-gold-dark:        #d4a80a;   /* hover/active state */
  --vq-gold-light:       #fef3c7;   /* lightest gold tint, highlight backgrounds */

  --vq-accent:           #6c7ce7;   /* blue-purple accent */
  --vq-accent-light:     #a8b2f7;
  --vq-accent-bg:        #e8eafd;   /* same as navy-bg — shared lightest tint */

  /* ── Neutrals ───────────────────────────────────────────── */
  --vq-white:            #ffffff;
  --vq-gray-50:          #f7f8fc;   /* page section backgrounds */
  --vq-gray-100:         #f0f1f8;
  --vq-gray-200:         #e2e4ef;   /* borders, dividers */
  --vq-gray-400:         #8a8fa8;   /* placeholder text */
  --vq-gray-600:         #555870;   /* secondary body text */
  --vq-gray-800:         #2d2f3e;   /* primary body text */
  --vq-gray-900:         #1a1c2e;   /* darkest — headings on light bg */

  /* ── Semantic (maps to brand) ───────────────────────────── */
  --vq-color-success:    #2e7d32;
  --vq-color-warning:    var(--vq-gold);
  --vq-color-error:      var(--vq-red);
  --vq-color-info:       var(--vq-navy);

  /* ── Typography ─────────────────────────────────────────── */
  --vq-font-display:     'Barlow Condensed', sans-serif;
  --vq-font-body:        'Source Serif 4', serif;
  --vq-font-ui:          'Barlow', sans-serif;  /* for labels, nav, badges */

  /* ── Spacing (8px base grid) ────────────────────────────── */
  --vq-space-1:          4px;
  --vq-space-2:          8px;
  --vq-space-3:          12px;
  --vq-space-4:          16px;
  --vq-space-5:          20px;
  --vq-space-6:          24px;
  --vq-space-8:          32px;
  --vq-space-10:         40px;
  --vq-space-12:         48px;
  --vq-space-16:         64px;
  --vq-space-24:         96px;

  /* ── Border Radius ──────────────────────────────────────── */
  --vq-radius-sm:        4px;
  --vq-radius-md:        8px;
  --vq-radius-lg:        12px;
  --vq-radius-xl:        16px;
  --vq-radius-pill:      999px;

  /* ── Shadows (navy-tinted) ──────────────────────────────── */
  --vq-shadow-sm:        0 2px 4px  rgba(42, 46, 109, 0.08);
  --vq-shadow-md:        0 4px 16px rgba(42, 46, 109, 0.12);
  --vq-shadow-lg:        0 8px 28px rgba(42, 46, 109, 0.16);
  --vq-shadow-xl:        0 16px 40px rgba(42, 46, 109, 0.20);

  /* ── Transitions ────────────────────────────────────────── */
  --vq-ease-fast:        0.15s ease;
  --vq-ease-normal:      0.25s ease;
  --vq-ease-slow:        0.40s ease;

  /* ── Z-index scale ──────────────────────────────────────── */
  --vq-z-sticky:         100;
  --vq-z-dropdown:       200;
  --vq-z-modal:          1000;
  --vq-z-toast:          2000;
}


/* ── §2 TYPOGRAPHY ────────────────────────────────────────── */
/*
   Load fonts via Divi → Theme Options → General → Custom Fonts
   OR add @import here if not using Divi font loader.

   @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700&family=Barlow+Condensed:wght@600;700;800&family=Source+Serif+4:wght@400;600&display=swap');
*/

body,
.et_pb_text,
.vetquiz-container {
  font-family:  var(--vq-font-body);
  font-size:    16px;
  line-height:  1.65;
  color:        var(--vq-gray-800);
}

/* Headings use display font */
h1, h2, h3,
.vd-form h2,
.vd-form h3,
.vetquiz-container h2,
.disability-result h4 {
  font-family: var(--vq-font-display);
  color:       var(--vq-navy);
  line-height: 1.2;
}

h1                    { font-size: clamp(28px, 4vw, 42px); font-weight: 800; }
h2, .vd-form h2       { font-size: clamp(22px, 3vw, 32px); font-weight: 700; }
h3, .vd-form h3       { font-size: clamp(18px, 2.5vw, 24px); font-weight: 600; }
h4                    { font-size: 18px; font-weight: 600; }

/* H2 accent underline — gold bar below key section headings */
.vq-section-heading {
  position:      relative;
  padding-bottom: var(--vq-space-3);
  margin-bottom:  var(--vq-space-6);
}
.vq-section-heading::after {
  content:       '';
  position:      absolute;
  bottom:        0;
  left:          0;
  width:         56px;
  height:        4px;
  background:    var(--vq-gold);
  border-radius: var(--vq-radius-pill);
}

/* H3 left-bar accent — used inside cards and form sections */
.vd-form h3::before,
.vd-section-title::before {
  content:       '';
  display:       inline-block;
  width:         4px;
  height:        1em;
  background:    var(--vq-gold);       /* was --vq-accent (purple) */
  margin-right:  var(--vq-space-2);
  border-radius: var(--vq-radius-sm);
  vertical-align: middle;
}

/* Small caps label — badges, tags, "DISCLAIMER" etc. */
.vq-label {
  font-family:     var(--vq-font-ui);
  font-size:       11px;
  font-weight:     700;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
}

/* Body text — match heading font family */
body,
p,
li,
td,
.et_pb_text p,
.et_pb_text li,
.et_pb_module {
  font-family: 'Barlow', sans-serif !important;
}

/* ── §3 BUTTONS ───────────────────────────────────────────── */
/*
   HIERARCHY
   ─────────────────────────────────────────────────────────────
   PRIMARY   .vd-btn              Gold bg  / Navy text  — main CTAs
   SECONDARY .vd-btn-secondary    Navy bg  / White text — supporting actions
   OUTLINE   .vd-btn-outline      Transparent / Navy border — low emphasis
   DANGER    .vd-btn-danger       Red bg   / White text — destructive only
   DISABLED  .vd-btn[disabled]    Gray — not interactive

   USAGE GUIDE
   ─────────────────────────────────────────────────────────────
   Primary:    Start Quiz, Continue, Email Results, Submit
   Secondary:  Schedule a Call, Print Results, Save
   Outline:    Back, Tell Us How to Improve, Cancel
   Danger:     Never use for disclaimers — use info cards instead
*/

/* Shared base */
.vd-btn,
.vetquiz-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              var(--vq-space-2);
  padding:          12px 28px;
  font-family:      var(--vq-font-ui);
  font-size:        16px;
  font-weight:      700;
  letter-spacing:   0.03em;
  text-decoration:  none;
  border-width:     2px;
  border-style:     solid;
  border-radius:    var(--vq-radius-md);
  cursor:           pointer;
  min-width:        140px;
  text-align:       center;
  transition:
    background      var(--vq-ease-fast),
    border-color    var(--vq-ease-fast),
    color           var(--vq-ease-fast),
    transform       var(--vq-ease-fast),
    box-shadow      var(--vq-ease-fast);
  /* Remove the shimmer ::before animation for simplicity —
     designer can re-add if desired */
  overflow:         visible;
  position:         relative;
}

/* ── PRIMARY — gold + navy text ──────────────────────────── */
.vd-btn,
.vetquiz-btn {
  background:    var(--vq-gold);
  color:         var(--vq-navy);
  border-color:  var(--vq-gold);
}
.vd-btn:hover,
.vd-btn:focus,
.vetquiz-btn:hover,
.vetquiz-btn:focus {
  background:    var(--vq-gold-dark);
  border-color:  var(--vq-gold-dark);
  color:         var(--vq-navy);
  transform:     translateY(-2px);
  box-shadow:    var(--vq-shadow-md);
  outline:       none;
}
.vd-btn:active,
.vetquiz-btn:active {
  transform:     translateY(0);
  box-shadow:    none;
}

/* ── SECONDARY — navy + white text ──────────────────────── */
.vd-btn-secondary,
.vetquiz-btn-secondary {
  background:   var(--vq-navy);
  color:        var(--vq-white);
  border-color: var(--vq-navy);
}
.vd-btn-secondary:hover,
.vd-btn-secondary:focus,
.vetquiz-btn-secondary:hover,
.vetquiz-btn-secondary:focus {
  background:   var(--vq-navy-dark);
  border-color: var(--vq-navy-dark);
  color:        var(--vq-white);
  transform:    translateY(-2px);
  box-shadow:   var(--vq-shadow-md);
  outline:      none;
}

/* ── OUTLINE / GHOST — transparent + navy border ─────────── */
.vd-btn-outline,
.vetquiz-btn-outline {
  background:   transparent;
  color:        var(--vq-navy);
  border-color: var(--vq-navy);
}
.vd-btn-outline:hover,
.vd-btn-outline:focus,
.vetquiz-btn-outline:hover,
.vetquiz-btn-outline:focus {
  background:   var(--vq-navy);
  color:        var(--vq-white);
  transform:    translateY(-2px);
  outline:      none;
}

/* ── DANGER — red, use sparingly ─────────────────────────── */
.vd-btn-danger {
  background:   var(--vq-red);
  color:        var(--vq-white);
  border-color: var(--vq-red);
}
.vd-btn-danger:hover,
.vd-btn-danger:focus {
  background:   var(--vq-red-dark);
  border-color: var(--vq-red-dark);
  color:        var(--vq-white);
  outline:      none;
}

/* ── DISABLED ─────────────────────────────────────────────── */
.vd-btn[disabled],
.vd-btn-disabled,
.vetquiz-btn[disabled] {
  background:   var(--vq-gray-400);
  border-color: var(--vq-gray-400);
  color:        var(--vq-white);
  cursor:       not-allowed;
  opacity:      0.6;
  transform:    none !important;
  box-shadow:   none !important;
}

/* ── SIZE VARIANTS ─────────────────────────────────────────── */
.vd-btn-lg {
  padding:     16px 40px;
  font-size:   18px;
  min-width:   200px;
}
.vd-btn-sm {
  padding:     8px 16px;
  font-size:   14px;
  min-width:   100px;
}

/* ── FULL WIDTH (mobile stacked buttons) ─────────────────── */
.vd-btn-full {
  display: flex;
  width:   100%;
}

/* ── FOCUS RING (accessibility) ──────────────────────────── */
.vd-btn:focus-visible,
.vetquiz-btn:focus-visible,
button:focus-visible {
  outline:        3px solid var(--vq-gold);
  outline-offset: 3px;
}


/* ── §4 CARDS ─────────────────────────────────────────────── */
/*
   Shared card style used across:
   - Main Menu disability items (.vetquiz-item)
   - Resource page articles
   - Results (.disability-result) — has its own overrides below
   - How It Works cards (Home page)
*/

.vq-card {
  background:    var(--vq-white);
  border:        1px solid var(--vq-gray-200);
  border-radius: var(--vq-radius-lg);
  box-shadow:    var(--vq-shadow-sm);
  padding:       var(--vq-space-5);
  transition:
    box-shadow  var(--vq-ease-normal),
    transform   var(--vq-ease-normal),
    border-color var(--vq-ease-normal);
}
.vq-card:hover {
  box-shadow:    var(--vq-shadow-md);
  border-color:  var(--vq-navy);
  transform:     translateY(-2px);
}

/* Apply shared card hover to existing quiz item cards */
.vetquiz-item {
  border-color:  var(--vq-gray-200);
  transition:
    box-shadow   var(--vq-ease-normal),
    transform    var(--vq-ease-normal),
    border-color var(--vq-ease-normal),
    background   var(--vq-ease-normal);
}
.vetquiz-item:hover {
  border-color:  var(--vq-navy);
  background:    var(--vq-navy-bg);
  box-shadow:    var(--vq-shadow-md);
  transform:     translateY(-2px);
}

/* Selected state for quiz menu items */
.vetquiz-item.selected {
  border-color:  var(--vq-navy);
  border-width:  2px;
  background:    var(--vq-navy-bg);
  box-shadow:    var(--vq-shadow-sm);
}
.vetquiz-item.selected::after {
  content:     '✓';
  position:    absolute;
  top:         10px;
  right:       14px;
  color:       var(--vq-gold);
  font-weight: 900;
  font-size:   1.3em;
  font-family: var(--vq-font-ui);
}

/* Results card header — update from default navy */
.disability-result h4 {
  background: var(--vq-navy);
  color:      var(--vq-white);
}

/* Rating badge — use gold for better brand alignment */
.result-value.rating,
.vq-rating {
  background:    var(--vq-navy);
  color:         var(--vq-white);
  padding:       4px 12px;
  border-radius: var(--vq-radius-pill);
  font-weight:   800;
  font-size:     0.9em;
}


/* ── §5 FORM FIELDS ────────────────────────────────────────── */

.vd-select,
.vd-input,
.vetquiz-email input {
  border-color: var(--vq-gray-200);
  border-width: 2px;
  font-family:  var(--vq-font-body);
  font-size:    16px;
  color:        var(--vq-gray-800);
  transition:
    border-color var(--vq-ease-fast),
    box-shadow   var(--vq-ease-fast);
}
.vd-select:hover,
.vd-input:hover {
  border-color: var(--vq-navy-mid);
}
.vd-select:focus,
.vd-input:focus,
.vetquiz-email input:focus {
  outline:      none;
  border-color: var(--vq-gold);          /* was --vq-accent (purple) */
  box-shadow:   0 0 0 3px rgba(249, 197, 51, 0.25);
}
.vd-select.error,
.vd-input.error {
  border-color:     var(--vq-red);
  background-color: var(--vq-red-bg);
}

/* Form labels */
.vd-form label,
.vetquiz-email-field label {
  font-family:   var(--vq-font-ui);
  font-weight:   600;
  color:         var(--vq-navy);        /* was --vq-dark-gray */
  margin-bottom: var(--vq-space-1);
}


/* ── §6 PROGRESS BAR ───────────────────────────────────────── */

.progress-fill {
  background: linear-gradient(
    90deg,
    var(--vq-navy) 0%,
    var(--vq-gold) 100%       /* was navy → accent-purple */
  );
}

/* Progress container — update background tint */
.progress-indicator {
  background:   var(--vq-navy-bg);
  border-color: var(--vq-accent-light);
}
.progress-indicator h3,
.progress-indicator p,
.vd-progress-text {
  color: var(--vq-navy) !important;
}


/* ── §7 DISCLAIMER / INFO CARDS ────────────────────────────── */
/*
   REPLACES the full-width red disclaimer band on every page.
   Use these components instead of any red background sections.

   .vq-info-card        — general informational note (gold border)
   .vq-disclaimer-card  — legal disclaimer (navy footer context)
   .vq-warning-card     — cautionary note (gold, not red)
   .vq-error-card       — actual errors only (red border)
*/

/* General info — gold left border */
.vq-info-card {
  background:    var(--vq-gold-light);
  border-left:   4px solid var(--vq-gold);
  border-radius: 0 var(--vq-radius-md) var(--vq-radius-md) 0;
  padding:       var(--vq-space-4) var(--vq-space-5);
  margin:        var(--vq-space-5) 0;
}
.vq-info-card p {
  margin:  0;
  color:   var(--vq-gray-800);
  font-size: 14px;
  line-height: 1.6;
}

/* Disclaimer — used in footer and results page */
.vq-disclaimer-card {
  background:    rgba(255, 255, 255, 0.06);
  border-left:   4px solid var(--vq-gold);
  border-radius: 0 var(--vq-radius-md) var(--vq-radius-md) 0;
  padding:       var(--vq-space-4) var(--vq-space-5);
}
.vq-disclaimer-card .vq-disclaimer-label {
  font-family:    var(--vq-font-ui);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--vq-gold);
  display:        block;
  margin-bottom:  var(--vq-space-2);
}
.vq-disclaimer-card p {
  margin:      0;
  color:       rgba(255, 255, 255, 0.75);
  font-size:   13px;
  line-height: 1.6;
}

/* Warning — cautionary, not alarming */
.vq-warning-card {
  background:  var(--vq-gold-light);
  border-left: 4px solid var(--vq-gold);
  border-radius: 0 var(--vq-radius-md) var(--vq-radius-md) 0;
  padding:     var(--vq-space-4) var(--vq-space-5);
  margin:      var(--vq-space-4) 0;
}
.vq-warning-card p {
  margin:    0;
  color:     var(--vq-gray-800);
  font-size: 14px;
}

/* Errors — for actual errors only, never decoration */
.vq-error-card,
.vd-error {
  background:   var(--vq-red-bg);
  border-left:  4px solid var(--vq-red);
  border-radius: 0 var(--vq-radius-md) var(--vq-radius-md) 0;
  color:        #7b1d1d;
  padding:      var(--vq-space-4) var(--vq-space-5);
}

/* Patent Pending badge */
.vq-patent-badge {
  display:       inline-block;
  font-family:   var(--vq-font-ui);
  font-size:     11px;
  font-weight:   700;
  letter-spacing: 0.06em;
  border:        1px solid var(--vq-gold);
  color:         var(--vq-gold);
  border-radius: var(--vq-radius-sm);
  padding:       2px 7px;
  vertical-align: middle;
}


/* ── §8 NAVIGATION ─────────────────────────────────────────── */
/*
   Targets Divi's header elements.
   Adjust selectors if your Divi header type differs.
*/

/* Sticky header bar */
#main-header,
#et-top-navigation {
  background:  var(--vq-navy) !important;
  height:      64px;
  box-shadow:  0 2px 8px rgba(26, 28, 46, 0.35);
}

/* Nav links */
#top-menu a,
#et-top-navigation a {
  color:          rgba(255, 255, 255, 0.85) !important;
  font-family:    var(--vq-font-ui);
  font-weight:    600;
  letter-spacing: 0.02em;
  transition:     color var(--vq-ease-fast);
  position:       relative;
  padding-bottom: 4px;
}
#top-menu a::after {
  content:    '';
  position:   absolute;
  bottom:     -2px;
  left:       0;
  width:      0;
  height:     2px;
  background: var(--vq-gold);
  transition: width var(--vq-ease-normal);
  border-radius: var(--vq-radius-pill);
}
#top-menu a:hover::after,
#top-menu .current-menu-item > a::after {
  width: 100%;
}
#top-menu a:hover,
#top-menu .current-menu-item > a {
  color: var(--vq-gold) !important;
}

/* "Start Free Quiz" CTA in nav */
#top-menu .vq-nav-cta a,
.et_pb_button.vq-nav-cta {
  background:    var(--vq-gold) !important;
  color:         var(--vq-navy) !important;
  border-radius: var(--vq-radius-md) !important;
  padding:       8px 20px !important;
  font-weight:   700 !important;
}
#top-menu .vq-nav-cta a:hover {
  background: var(--vq-gold-dark) !important;
}


/* ── §9 FOOTER ─────────────────────────────────────────────── */
/*
   IMPORTANT: Remove the full-width red disclaimer band from
   the Divi footer template. Replace with .vq-disclaimer-card
   inside the existing dark footer section.
*/

#main-footer,
.et_pb_section.vq-footer-section {
  background: linear-gradient(160deg, #1a1c2e 0%, var(--vq-navy) 100%);
}

/* Footer nav links */
#main-footer a,
.et_pb_section.vq-footer-section a {
  color:       rgba(255, 255, 255, 0.75);
  transition:  color var(--vq-ease-fast);
  font-size:   14px;
  font-family: var(--vq-font-ui);
}
#main-footer a:hover,
.et_pb_section.vq-footer-section a:hover {
  color: var(--vq-white);
}

/* Donate button in footer — primary style */
.vq-footer-donate {
  background:    var(--vq-gold) !important;
  color:         var(--vq-navy) !important;
  border-color:  var(--vq-gold) !important;
  font-weight:   700 !important;
  border-radius: var(--vq-radius-md) !important;
}
.vq-footer-donate:hover {
  background:   var(--vq-gold-dark) !important;
  border-color: var(--vq-gold-dark) !important;
}

/* COPYRIGHT / footer bottom strip */
#footer-bottom,
#footer-bottom p {
  background: rgba(0, 0, 0, 0.25);
  color:      rgba(255, 255, 255, 0.50);
  font-size:  13px;
  font-family: var(--vq-font-ui);
}


/* ── §10 UTILITY CLASSES ────────────────────────────────────── */

/* Selection bar — sticky counter on Main Menu page */
.vq-selection-bar {
  position:        sticky;
  top:             64px;   /* matches header height */
  z-index:         var(--vq-z-sticky);
  background:      var(--vq-navy);
  color:           var(--vq-white);
  padding:         10px var(--vq-space-5);
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--vq-space-4);
  box-shadow:      var(--vq-shadow-md);
  font-family:     var(--vq-font-ui);
  font-weight:     600;
}
.vq-selection-bar .vq-count {
  color:       var(--vq-gold);
  font-weight: 800;
}

/* Combined rating hero — Results page */
.vq-combined-rating {
  background:    var(--vq-navy);
  color:         var(--vq-white);
  border-radius: var(--vq-radius-xl);
  padding:       var(--vq-space-10) var(--vq-space-8);
  text-align:    center;
  margin-bottom: var(--vq-space-8);
}
.vq-combined-rating .vq-rating-number {
  display:     block;
  font-family: var(--vq-font-display);
  font-size:   clamp(56px, 8vw, 80px);
  font-weight: 900;
  color:       var(--vq-gold);
  line-height: 1;
}
.vq-combined-rating .vq-rating-label {
  font-size:  16px;
  opacity:    0.8;
  margin-top: var(--vq-space-2);
}

/* Numbered circle badges — "Next Steps" list */
.vq-step-number {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  background:      var(--vq-navy);
  color:           var(--vq-white);
  border-radius:   var(--vq-radius-pill);
  font-family:     var(--vq-font-ui);
  font-weight:     800;
  font-size:       15px;
  flex-shrink:     0;
}

/* Category tag pills */
.vq-tag {
  display:       inline-block;
  background:    var(--vq-navy);
  color:         var(--vq-white);
  border-radius: var(--vq-radius-pill);
  padding:       3px 10px;
  font-family:   var(--vq-font-ui);
  font-size:     12px;
  font-weight:   600;
  letter-spacing: 0.03em;
}
.vq-tag-gold {
  background: var(--vq-gold);
  color:      var(--vq-navy);
}
.vq-tag-outline {
  background:   transparent;
  color:        var(--vq-navy);
  border:       1px solid var(--vq-navy);
}

/* Screen reader only (keep from master CSS) */
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

/* Global focus ring */
*:focus-visible {
  outline:        3px solid var(--vq-gold);
  outline-offset: 2px;
}

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

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --vq-navy:   #00008b;
    --vq-gold:   #FFD700;
    --vq-red:    #8B0000;
    --vq-accent: #0000FF;
  }
}


/* ── RESPONSIVE ─────────────────────────────────────────────── */

@media (max-width: 980px) {
  .vq-selection-bar {
    flex-direction: column;
    text-align:     center;
    gap:            var(--vq-space-2);
  }
  .vd-btn,
  .vetquiz-btn {
    width:   100%;
    display: flex;
  }
}

@media (max-width: 767px) {
  .vq-combined-rating {
    padding: var(--vq-space-6) var(--vq-space-4);
  }
  .vq-selection-bar {
    top: 0;  /* mobile: header may not be sticky */
  }
}