/*
Theme Name: VitaCare
Theme URI: https://example.com/vitacare
Author: VitaCare Team
Author URI: https://example.com
Description: A premium, modern WordPress theme designed specifically for healthcare websites. Features include dark/light mode toggle, card-based layouts, responsive mega menus, glassmorphism search, and comprehensive healthcare-focused components.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vitacare
Tags: health, medical, healthcare, dark-mode, responsive, accessibility-ready, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready

VitaCare - Where Health Meets Innovation
*/

/* =====================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ===================================================== */

:root {
  /* ---- Color System: Light Mode (Default) ---- */

  /* Primary Colors */
  --vc-primary: hsl(199, 89%, 48%);
  --vc-primary-light: hsl(199, 89%, 58%);
  --vc-primary-dark: hsl(199, 89%, 38%);
  --vc-primary-alpha: hsla(199, 89%, 48%, 0.15);

  /* Secondary Colors */
  --vc-secondary: hsl(160, 84%, 39%);
  --vc-secondary-light: hsl(160, 84%, 49%);
  --vc-secondary-dark: hsl(160, 84%, 29%);

  /* Accent Colors */
  --vc-accent: hsl(262, 83%, 58%);
  --vc-accent-light: hsl(262, 83%, 68%);
  --vc-accent-dark: hsl(262, 83%, 48%);

  /* Semantic Colors */
  --vc-success: hsl(142, 76%, 36%);
  --vc-warning: hsl(38, 92%, 50%);
  --vc-error: hsl(0, 84%, 60%);
  --vc-info: hsl(199, 89%, 48%);

  /* Background Colors */
  --vc-bg-primary: hsl(210, 40%, 98%);
  --vc-bg-secondary: hsl(210, 40%, 96%);
  --vc-bg-tertiary: hsl(210, 20%, 94%);
  --vc-bg-elevated: hsl(0, 0%, 100%);

  /* Surface Colors */
  --vc-surface: hsl(0, 0%, 100%);
  --vc-surface-hover: hsl(210, 40%, 98%);
  --vc-surface-active: hsl(210, 40%, 96%);

  /* Text Colors */
  --vc-text-primary: hsl(222, 47%, 11%);
  --vc-text-secondary: hsl(215, 16%, 47%);
  --vc-text-tertiary: hsl(215, 16%, 57%);
  --vc-text-inverse: hsl(0, 0%, 100%);
  --vc-text-link: hsl(199, 89%, 48%);
  --vc-text-link-hover: hsl(199, 89%, 38%);

  /* Border Colors */
  --vc-border-light: hsl(214, 32%, 91%);
  --vc-border-medium: hsl(214, 20%, 85%);
  --vc-border-dark: hsl(214, 20%, 69%);

  /* Shadow Colors */
  --vc-shadow-color: hsla(222, 47%, 11%, 0.08);
  --vc-shadow-color-strong: hsla(222, 47%, 11%, 0.15);

  /* ---- Typography ---- */

  /* Font Families */
  --vc-font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --vc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --vc-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes (Fluid Typography) */
  --vc-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --vc-text-sm: clamp(0.8125rem, 0.775rem + 0.25vw, 0.875rem);
  --vc-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --vc-text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
  --vc-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --vc-text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --vc-text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.5rem);
  --vc-text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
  --vc-text-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem);

  /* Line Heights */
  --vc-leading-none: 1;
  --vc-leading-tight: 1.25;
  --vc-leading-snug: 1.375;
  --vc-leading-normal: 1.5;
  --vc-leading-relaxed: 1.625;
  --vc-leading-loose: 1.8;

  /* Letter Spacing */
  --vc-tracking-tighter: -0.05em;
  --vc-tracking-tight: -0.025em;
  --vc-tracking-normal: 0;
  --vc-tracking-wide: 0.025em;
  --vc-tracking-wider: 0.05em;

  /* Font Weights */
  --vc-font-light: 300;
  --vc-font-regular: 400;
  --vc-font-medium: 500;
  --vc-font-semibold: 600;
  --vc-font-bold: 700;
  --vc-font-extrabold: 800;

  /* ---- Spacing System ---- */
  --vc-space-1: 0.25rem;
  /* 4px */
  --vc-space-2: 0.5rem;
  /* 8px */
  --vc-space-3: 0.75rem;
  /* 12px */
  --vc-space-4: 1rem;
  /* 16px */
  --vc-space-5: 1.25rem;
  /* 20px */
  --vc-space-6: 1.5rem;
  /* 24px */
  --vc-space-8: 2rem;
  /* 32px */
  --vc-space-10: 2.5rem;
  /* 40px */
  --vc-space-12: 3rem;
  /* 48px */
  --vc-space-16: 4rem;
  /* 64px */
  --vc-space-20: 5rem;
  /* 80px */
  --vc-space-24: 6rem;
  /* 96px */
  --vc-space-32: 8rem;
  /* 128px */

  /* ---- Border Radius ---- */
  --vc-radius-sm: 0.25rem;
  --vc-radius-md: 0.5rem;
  --vc-radius-lg: 0.75rem;
  --vc-radius-xl: 1rem;
  --vc-radius-2xl: 1.5rem;
  --vc-radius-full: 9999px;

  /* ---- Shadows ---- */
  --vc-shadow-xs: 0 1px 2px 0 var(--vc-shadow-color);
  --vc-shadow-sm: 0 1px 3px 0 var(--vc-shadow-color), 0 1px 2px -1px var(--vc-shadow-color);
  --vc-shadow-md: 0 4px 6px -1px var(--vc-shadow-color), 0 2px 4px -2px var(--vc-shadow-color);
  --vc-shadow-lg: 0 10px 15px -3px var(--vc-shadow-color), 0 4px 6px -4px var(--vc-shadow-color);
  --vc-shadow-xl: 0 20px 25px -5px var(--vc-shadow-color), 0 8px 10px -6px var(--vc-shadow-color);
  --vc-shadow-2xl: 0 25px 50px -12px var(--vc-shadow-color-strong);
  --vc-shadow-inner: inset 0 2px 4px 0 var(--vc-shadow-color);

  /* Glassmorphism Shadows */
  --vc-shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

  /* ---- Transitions ---- */
  --vc-transition-fast: 150ms ease;
  --vc-transition-base: 250ms ease;
  --vc-transition-slow: 350ms ease;
  --vc-transition-slower: 500ms ease;

  /* ---- Z-Index Scale ---- */
  --vc-z-dropdown: 1000;
  --vc-z-sticky: 1020;
  --vc-z-fixed: 1030;
  --vc-z-modal-backdrop: 1040;
  --vc-z-modal: 1050;
  --vc-z-popover: 1060;
  --vc-z-tooltip: 1070;
  --vc-z-toast: 1080;

  /* ---- Breakpoints (for reference in CSS) ---- */
  --vc-breakpoint-sm: 640px;
  --vc-breakpoint-md: 768px;
  --vc-breakpoint-lg: 1024px;
  --vc-breakpoint-xl: 1280px;
  --vc-breakpoint-2xl: 1536px;

  /* ---- Container Widths ---- */
  --vc-container-sm: 640px;
  --vc-container-md: 768px;
  --vc-container-lg: 1024px;
  --vc-container-xl: 1280px;
  --vc-container-2xl: 1400px;

  /* ---- Content Width ---- */
  --vc-content-width: 680px;

  /* ---- Header Height ---- */
  --vc-header-height: 80px;
  --vc-header-height-mobile: 64px;

  /* ---- Glassmorphism ---- */
  --vc-glass-bg: rgba(255, 255, 255, 0.7);
  --vc-glass-border: rgba(255, 255, 255, 0.18);
  --vc-glass-blur: blur(20px);
}

/* =====================================================
   DARK MODE VARIABLES
   ===================================================== */

[data-theme="dark"] {
  /* Background Colors */
  --vc-bg-primary: hsl(222, 47%, 8%);
  --vc-bg-secondary: hsl(222, 47%, 11%);
  --vc-bg-tertiary: hsl(217, 33%, 15%);
  --vc-bg-elevated: hsl(217, 33%, 17%);

  /* Surface Colors */
  --vc-surface: hsl(217, 33%, 17%);
  --vc-surface-hover: hsl(217, 33%, 20%);
  --vc-surface-active: hsl(217, 33%, 23%);

  /* Text Colors */
  --vc-text-primary: hsl(210, 40%, 98%);
  --vc-text-secondary: hsl(215, 20%, 65%);
  --vc-text-tertiary: hsl(215, 16%, 50%);
  --vc-text-inverse: hsl(222, 47%, 11%);
  --vc-text-link: hsl(199, 89%, 58%);
  --vc-text-link-hover: hsl(199, 89%, 68%);

  /* Primary Colors - Brighter for dark mode */
  --vc-primary: hsl(199, 89%, 58%);
  --vc-primary-light: hsl(199, 89%, 68%);
  --vc-primary-dark: hsl(199, 89%, 48%);

  /* Border Colors */
  --vc-border-light: hsl(217, 33%, 22%);
  --vc-border-medium: hsl(217, 33%, 28%);
  --vc-border-dark: hsl(217, 33%, 35%);

  /* Shadow Colors */
  --vc-shadow-color: hsla(0, 0%, 0%, 0.3);
  --vc-shadow-color-strong: hsla(0, 0%, 0%, 0.5);

  /* Glassmorphism */
  --vc-glass-bg: rgba(30, 41, 59, 0.8);
  --vc-glass-border: rgba(255, 255, 255, 0.08);
}

/* =====================================================
   CSS RESET & BASE STYLES
   ===================================================== */

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

/* List Reset - Remove all bullets globally */
ul,
ol {
  list-style: none;
  list-style-type: none;
}

ul li,
ol li {
  list-style: none;
  list-style-type: none;
}

ul li::marker,
ol li::marker {
  content: none;
  font-size: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--vc-font-body);
  font-size: var(--vc-text-base);
  line-height: var(--vc-leading-normal);
  color: var(--vc-text-primary);
  background-color: var(--vc-bg-primary);
  transition: background-color var(--vc-transition-base), color var(--vc-transition-base);
}

/* ---- Typography Base ---- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--vc-font-heading);
  font-weight: var(--vc-font-bold);
  line-height: var(--vc-leading-tight);
  color: var(--vc-text-primary);
  letter-spacing: var(--vc-tracking-tight);
}

h1 {
  font-size: var(--vc-text-5xl);
  font-weight: var(--vc-font-extrabold);
}

h2 {
  font-size: var(--vc-text-4xl);
}

h3 {
  font-size: var(--vc-text-3xl);
}

h4 {
  font-size: var(--vc-text-2xl);
}

h5 {
  font-size: var(--vc-text-xl);
}

h6 {
  font-size: var(--vc-text-lg);
}

p {
  margin-bottom: var(--vc-space-4);
  color: var(--vc-text-secondary);
}

a {
  color: var(--vc-text-link);
  text-decoration: none;
  transition: color var(--vc-transition-fast);
}

a:hover {
  color: var(--vc-text-link-hover);
}

a:focus-visible {
  outline: 2px solid var(--vc-primary);
  outline-offset: 2px;
  border-radius: var(--vc-radius-sm);
}

strong,
b {
  font-weight: var(--vc-font-semibold);
}

small {
  font-size: var(--vc-text-sm);
}

/* ---- Lists ---- */

ul,
ol {
  padding-left: var(--vc-space-6);
  margin-bottom: var(--vc-space-4);
}

li {
  margin-bottom: var(--vc-space-2);
}

/* ---- Images ---- */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---- Forms Base ---- */

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* ---- Focus States for Accessibility ---- */

:focus-visible {
  outline: 2px solid var(--vc-primary);
  outline-offset: 2px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* ---- Selection ---- */

::selection {
  background-color: var(--vc-primary-alpha);
  color: var(--vc-text-primary);
}

/* ---- Scrollbar Styling ---- */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--vc-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--vc-border-dark);
  border-radius: var(--vc-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--vc-text-tertiary);
}

/* =====================================================
   LAYOUT UTILITIES
   ===================================================== */

.vc-container {
  width: 100%;
  max-width: var(--vc-container-2xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--vc-space-4);
  padding-right: var(--vc-space-4);
}

@media (min-width: 768px) {
  .vc-container {
    padding-left: var(--vc-space-6);
    padding-right: var(--vc-space-6);
  }
}

@media (min-width: 1024px) {
  .vc-container {
    padding-left: var(--vc-space-8);
    padding-right: var(--vc-space-8);
  }
}

.vc-container-narrow {
  max-width: var(--vc-content-width);
}

/* ---- Flex Utilities ---- */

.vc-flex {
  display: flex;
}

.vc-flex-col {
  flex-direction: column;
}

.vc-items-center {
  align-items: center;
}

.vc-items-start {
  align-items: flex-start;
}

.vc-items-end {
  align-items: flex-end;
}

.vc-justify-center {
  justify-content: center;
}

.vc-justify-between {
  justify-content: space-between;
}

.vc-justify-end {
  justify-content: flex-end;
}

.vc-flex-wrap {
  flex-wrap: wrap;
}

.vc-flex-1 {
  flex: 1;
}

.vc-gap-1 {
  gap: var(--vc-space-1);
}

.vc-gap-2 {
  gap: var(--vc-space-2);
}

.vc-gap-3 {
  gap: var(--vc-space-3);
}

.vc-gap-4 {
  gap: var(--vc-space-4);
}

.vc-gap-6 {
  gap: var(--vc-space-6);
}

.vc-gap-8 {
  gap: var(--vc-space-8);
}

/* ---- Grid Utilities ---- */

.vc-grid {
  display: grid;
}

.vc-grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.vc-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vc-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vc-grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .vc-sm-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .vc-md-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vc-md-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vc-md-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .vc-lg-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vc-lg-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- Spacing Utilities ---- */

.vc-mt-4 {
  margin-top: var(--vc-space-4);
}

.vc-mt-6 {
  margin-top: var(--vc-space-6);
}

.vc-mt-8 {
  margin-top: var(--vc-space-8);
}

.vc-mb-4 {
  margin-bottom: var(--vc-space-4);
}

.vc-mb-6 {
  margin-bottom: var(--vc-space-6);
}

.vc-mb-8 {
  margin-bottom: var(--vc-space-8);
}

.vc-my-8 {
  margin-top: var(--vc-space-8);
  margin-bottom: var(--vc-space-8);
}

.vc-my-12 {
  margin-top: var(--vc-space-12);
  margin-bottom: var(--vc-space-12);
}

.vc-p-4 {
  padding: var(--vc-space-4);
}

.vc-p-6 {
  padding: var(--vc-space-6);
}

.vc-p-8 {
  padding: var(--vc-space-8);
}

.vc-py-8 {
  padding-top: var(--vc-space-8);
  padding-bottom: var(--vc-space-8);
}

.vc-py-12 {
  padding-top: var(--vc-space-12);
  padding-bottom: var(--vc-space-12);
}

.vc-py-16 {
  padding-top: var(--vc-space-16);
  padding-bottom: var(--vc-space-16);
}

.vc-py-20 {
  padding-top: var(--vc-space-20);
  padding-bottom: var(--vc-space-20);
}

/* ---- Text Utilities ---- */

.vc-text-center {
  text-align: center;
}

.vc-text-left {
  text-align: left;
}

.vc-text-right {
  text-align: right;
}

.vc-text-primary {
  color: var(--vc-text-primary);
}

.vc-text-secondary {
  color: var(--vc-text-secondary);
}

.vc-text-accent {
  color: var(--vc-primary);
}

.vc-font-medium {
  font-weight: var(--vc-font-medium);
}

.vc-font-semibold {
  font-weight: var(--vc-font-semibold);
}

.vc-font-bold {
  font-weight: var(--vc-font-bold);
}

/* ---- Display Utilities ---- */

.vc-hidden {
  display: none;
}

.vc-block {
  display: block;
}

.vc-inline-block {
  display: inline-block;
}

.vc-inline-flex {
  display: inline-flex;
}

@media (min-width: 768px) {
  .vc-md-hidden {
    display: none;
  }

  .vc-md-block {
    display: block;
  }

  .vc-md-flex {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .vc-lg-hidden {
    display: none;
  }

  .vc-lg-block {
    display: block;
  }

  .vc-lg-flex {
    display: flex;
  }
}

/* ---- Visibility ---- */

.vc-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;
}

/* =====================================================
   COMPONENT BASE STYLES
   ===================================================== */

/* ---- Buttons ---- */

.vc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vc-space-2);
  padding: var(--vc-space-3) var(--vc-space-6);
  font-family: var(--vc-font-body);
  font-size: var(--vc-text-sm);
  font-weight: var(--vc-font-semibold);
  line-height: 1;
  text-decoration: none;
  border-radius: var(--vc-radius-lg);
  transition: all var(--vc-transition-fast);
  cursor: pointer;
  white-space: nowrap;
}

.vc-btn:focus-visible {
  outline: 2px solid var(--vc-primary);
  outline-offset: 2px;
}

.vc-btn-primary {
  background: linear-gradient(135deg, var(--vc-primary), var(--vc-primary-dark));
  color: var(--vc-text-inverse);
  box-shadow: var(--vc-shadow-md), 0 0 0 0 var(--vc-primary-alpha);
}

.vc-btn-primary:hover {
  background: linear-gradient(135deg, var(--vc-primary-light), var(--vc-primary));
  transform: translateY(-2px);
  box-shadow: var(--vc-shadow-lg), 0 0 20px var(--vc-primary-alpha);
  color: var(--vc-text-inverse);
}

.vc-btn-secondary {
  background-color: var(--vc-surface);
  color: var(--vc-text-primary);
  border: 1px solid var(--vc-border-medium);
}

.vc-btn-secondary:hover {
  background-color: var(--vc-surface-hover);
  border-color: var(--vc-primary);
  color: var(--vc-primary);
}

.vc-btn-outline {
  background-color: transparent;
  color: var(--vc-primary);
  border: 2px solid var(--vc-primary);
}

.vc-btn-outline:hover {
  background-color: var(--vc-primary);
  color: var(--vc-text-inverse);
}

.vc-btn-ghost {
  background-color: transparent;
  color: var(--vc-text-primary);
}

.vc-btn-ghost:hover {
  background-color: var(--vc-surface-hover);
}

.vc-btn-lg {
  padding: var(--vc-space-4) var(--vc-space-8);
  font-size: var(--vc-text-base);
}

.vc-btn-sm {
  padding: var(--vc-space-2) var(--vc-space-4);
  font-size: var(--vc-text-xs);
}

.vc-btn-icon {
  padding: var(--vc-space-3);
  border-radius: var(--vc-radius-full);
}

/* ---- Cards ---- */

.vc-card {
  background-color: var(--vc-surface);
  border-radius: var(--vc-radius-xl);
  box-shadow: var(--vc-shadow-md);
  overflow: hidden;
  transition: transform var(--vc-transition-base), box-shadow var(--vc-transition-base);
}

.vc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--vc-shadow-xl);
}

.vc-card-body {
  padding: var(--vc-space-6);
}

.vc-card-glass {
  background: var(--vc-glass-bg);
  backdrop-filter: var(--vc-glass-blur);
  -webkit-backdrop-filter: var(--vc-glass-blur);
  border: 1px solid var(--vc-glass-border);
  box-shadow: var(--vc-shadow-glass);
}

/* ---- Badges ---- */

.vc-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--vc-space-1) var(--vc-space-3);
  font-size: var(--vc-text-xs);
  font-weight: var(--vc-font-medium);
  border-radius: var(--vc-radius-full);
  text-transform: uppercase;
  letter-spacing: var(--vc-tracking-wide);
}

.vc-badge-primary {
  background-color: var(--vc-primary-alpha);
  color: var(--vc-primary);
}

.vc-badge-secondary {
  background-color: hsla(160, 84%, 39%, 0.15);
  color: var(--vc-secondary);
}

.vc-badge-accent {
  background-color: hsla(262, 83%, 58%, 0.15);
  color: var(--vc-accent);
}

/* ---- Section Styling ---- */

.vc-section {
  padding-top: var(--vc-space-16);
  padding-bottom: var(--vc-space-16);
}

@media (min-width: 768px) {
  .vc-section {
    padding-top: var(--vc-space-20);
    padding-bottom: var(--vc-space-20);
  }
}

.vc-section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--vc-space-12);
}

.vc-section-title {
  margin-bottom: var(--vc-space-4);
}

.vc-section-subtitle {
  color: var(--vc-text-secondary);
  font-size: var(--vc-text-lg);
}

/* =====================================================
   SKIP LINK FOR ACCESSIBILITY
   ===================================================== */

.vc-skip-link {
  position: absolute;
  top: -100%;
  left: var(--vc-space-4);
  background: var(--vc-primary);
  color: var(--vc-text-inverse);
  padding: var(--vc-space-3) var(--vc-space-6);
  border-radius: var(--vc-radius-md);
  z-index: var(--vc-z-tooltip);
  transition: top var(--vc-transition-fast);
}

.vc-skip-link:focus {
  top: var(--vc-space-4);
}

/* =====================================================
   PRINT STYLES
   ===================================================== */

@media print {

  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  img {
    max-width: 100% !important;
  }

  .vc-no-print {
    display: none !important;
  }
}

/* =====================================================
   BLOG LAYOUT
   ===================================================== */

.vc-blog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vc-space-10);
}

@media (min-width: 1024px) {
  .vc-blog-layout {
    grid-template-columns: 1fr 300px;
  }
}

.vc-blog-main {
  min-width: 0;
}

.vc-blog-grid {
  display: grid;
  gap: var(--vc-space-8);
}

.vc-blog-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .vc-blog-sidebar {
    display: block;
  }
}

/* =====================================================
   SIDEBAR STYLES
   ===================================================== */

.widget-area,
.vc-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--vc-space-8);
}

.widget,
.vc-widget {
  background: var(--vc-surface);
  border: 1px solid var(--vc-border-light);
  border-radius: var(--vc-radius-xl);
  padding: var(--vc-space-6);
}

.widget-title,
.vc-widget-title {
  font-size: var(--vc-text-lg);
  font-weight: var(--vc-font-semibold);
  margin-bottom: var(--vc-space-4);
  padding-bottom: var(--vc-space-3);
  border-bottom: 2px solid var(--vc-primary);
  position: relative;
}

/* Search Widget */
.widget_search .search-form {
  display: flex;
  gap: var(--vc-space-2);
}

.widget_search .search-field {
  flex: 1;
  padding: var(--vc-space-3) var(--vc-space-4);
  border: 1px solid var(--vc-border-light);
  border-radius: var(--vc-radius-lg);
  font-size: var(--vc-text-sm);
  background: var(--vc-bg-primary);
  color: var(--vc-text-primary);
  transition: border-color var(--vc-transition-fast);
}

.widget_search .search-field:focus {
  outline: none;
  border-color: var(--vc-primary);
}

.widget_search .search-submit {
  padding: var(--vc-space-3) var(--vc-space-4);
  background: var(--vc-primary);
  color: white;
  border: none;
  border-radius: var(--vc-radius-lg);
  cursor: pointer;
  font-weight: var(--vc-font-medium);
  transition: background var(--vc-transition-fast);
}

.widget_search .search-submit:hover {
  background: var(--vc-primary-dark);
}

/* List Widgets (Categories, Archives, Recent Posts, etc.) */
.widget ul,
.vc-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget ul li,
.vc-widget ul li {
  padding: var(--vc-space-3) 0;
  border-bottom: 1px solid var(--vc-border-light);
}

.widget ul li:last-child,
.vc-widget ul li:last-child {
  border-bottom: none;
}

.widget ul li a,
.vc-widget ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--vc-text-secondary);
  text-decoration: none;
  font-size: var(--vc-text-sm);
  transition: color var(--vc-transition-fast);
}

.widget ul li a:hover,
.vc-widget ul li a:hover {
  color: var(--vc-primary);
}

/* Recent Posts Widget */
.widget_recent_entries li {
  display: block;
}

.widget_recent_entries li a {
  display: block;
  font-weight: var(--vc-font-medium);
  color: var(--vc-text-primary);
  margin-bottom: var(--vc-space-1);
}

.widget_recent_entries li .post-date {
  font-size: var(--vc-text-xs);
  color: var(--vc-text-tertiary);
}

/* Recent Comments Widget */
.widget_recent_comments .comment-author-link {
  font-weight: var(--vc-font-medium);
  color: var(--vc-text-primary);
}

.widget_recent_comments .comment-author-link a {
  color: var(--vc-primary);
}

/* Tag Cloud Widget */
.widget_tag_cloud .tagcloud,
.tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vc-space-2);
}

.widget_tag_cloud .tag-cloud-link,
.tagcloud a {
  display: inline-block;
  padding: var(--vc-space-2) var(--vc-space-3);
  background: var(--vc-bg-secondary);
  border-radius: var(--vc-radius-full);
  color: var(--vc-text-secondary);
  font-size: var(--vc-text-xs) !important;
  text-decoration: none;
  transition: all var(--vc-transition-fast);
}

.widget_tag_cloud .tag-cloud-link:hover,
.tagcloud a:hover {
  background: var(--vc-primary);
  color: white;
}

/* Calendar Widget */
.widget_calendar table {
  width: 100%;
  border-collapse: collapse;
}

.widget_calendar caption {
  font-weight: var(--vc-font-semibold);
  margin-bottom: var(--vc-space-3);
}

.widget_calendar th,
.widget_calendar td {
  padding: var(--vc-space-2);
  text-align: center;
  font-size: var(--vc-text-sm);
}

.widget_calendar th {
  font-weight: var(--vc-font-medium);
  color: var(--vc-text-tertiary);
}

.widget_calendar td a {
  color: var(--vc-primary);
  font-weight: var(--vc-font-medium);
}

/* =====================================================
   PLACEHOLDER IMAGES
   ===================================================== */

.vc-placeholder-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--vc-bg-tertiary);
  color: var(--vc-text-tertiary);
}

.vc-author-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--vc-primary-alpha);
  border-radius: var(--vc-radius-full);
  color: var(--vc-primary);
}

/* =====================================================
   BLOG CARD ADDITIONAL STYLES
   ===================================================== */

.vc-blog-card-category {
  display: inline-block;
  padding: var(--vc-space-1) var(--vc-space-3);
  background: var(--vc-primary);
  color: white;
  font-size: var(--vc-text-xs);
  font-weight: var(--vc-font-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--vc-radius-full);
  text-decoration: none;
  transition: background var(--vc-transition-fast);
}

.vc-blog-card-category:hover {
  background: var(--vc-primary-dark);
  color: white;
}

.vc-meta-separator {
  color: var(--vc-text-tertiary);
}

.vc-read-time {
  color: var(--vc-text-tertiary);
}

.vc-author-name {
  font-size: var(--vc-text-sm);
  font-weight: var(--vc-font-medium);
  color: var(--vc-text-primary);
}

.vc-read-more {
  display: inline-flex;
  align-items: center;
  gap: var(--vc-space-2);
  color: var(--vc-primary);
  font-size: var(--vc-text-sm);
  font-weight: var(--vc-font-medium);
  text-decoration: none;
  transition: gap var(--vc-transition-fast);
}

.vc-read-more:hover {
  gap: var(--vc-space-3);
  color: var(--vc-primary-dark);
}

/* =====================================================
   BLOG HEADER
   ===================================================== */

.vc-blog-header {
  background: linear-gradient(135deg, var(--vc-bg-secondary) 0%, var(--vc-bg-primary) 100%);
  padding: var(--vc-space-16) 0 var(--vc-space-12);
  text-align: center;
}

.vc-blog-page .vc-blog-header .vc-archive-title {
  background: linear-gradient(135deg, var(--vc-primary), var(--vc-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =====================================================
   HOMEPAGE BLOG SECTION
   ===================================================== */

.vc-blog-section .vc-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--vc-space-8);
}

/* =====================================================
   BREADCRUMBS
   ===================================================== */

.vc-breadcrumbs {
  margin-bottom: var(--vc-space-6);
}

.vc-breadcrumb-list {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--vc-space-2);
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: var(--vc-text-sm);
  counter-reset: none !important;
}

.vc-breadcrumb-list li {
  display: flex;
  align-items: center;
  color: var(--vc-text-tertiary);
  margin: 0 !important;
  padding: 0 !important;
}

.vc-breadcrumb-list li::before {
  content: none !important;
  display: none !important;
}

.vc-breadcrumb-list li:not(:last-child)::after {
  content: '/';
  margin-left: var(--vc-space-2);
  opacity: 0.5;
  color: var(--vc-text-tertiary);
}

.vc-breadcrumb-list li a {
  color: var(--vc-text-secondary);
  text-decoration: none;
  transition: color var(--vc-transition-fast);
}

.vc-breadcrumb-list li a:hover {
  color: var(--vc-primary);
}

.vc-breadcrumb-list .vc-breadcrumb-current,
.vc-breadcrumb-list .current {
  color: var(--vc-text-primary);
  font-weight: var(--vc-font-medium);
}

/* Archive sidebar styles */
.vc-archive-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .vc-archive-sidebar {
    display: block;
  }
}

/* Archive grid fix */
.vc-grid-3 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--vc-space-6);
}

@media (min-width: 640px) {
  .vc-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .vc-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =====================================================
   FOOTER WIDGET STYLES
   ===================================================== */

.vc-footer .widget,
.vc-footer-grid .widget {
  background: transparent;
  border: none;
  padding: 0;
}

.vc-footer .widget-title,
.vc-footer-grid .widget-title,
.vc-footer .widgettitle,
.vc-footer-grid .widgettitle,
.vc-footer h2,
.vc-footer-grid h2 {
  font-size: var(--vc-text-lg);
  font-weight: var(--vc-font-semibold);
  color: var(--vc-text-primary);
  margin-bottom: var(--vc-space-4);
  padding-bottom: 0;
  border-bottom: none;
}

.vc-footer .widget ul,
.vc-footer-grid .widget ul,
.vc-footer ul,
.vc-footer-grid ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.vc-footer .widget ul li,
.vc-footer-grid .widget ul li,
.vc-footer ul li,
.vc-footer-grid ul li {
  padding: var(--vc-space-2) 0;
  border-bottom: none;
  margin: 0 !important;
}

.vc-footer .widget ul li::before,
.vc-footer-grid ul li::before {
  content: none !important;
  display: none !important;
}

.vc-footer .widget ul li::marker,
.vc-footer-grid ul li::marker {
  content: none !important;
  display: none !important;
}

.vc-footer .widget ul li a,
.vc-footer-grid .widget ul li a,
.vc-footer ul li a,
.vc-footer-grid ul li a {
  color: var(--vc-text-secondary);
  text-decoration: none;
  font-size: var(--vc-text-sm);
  transition: color var(--vc-transition-fast);
  display: block;
}

.vc-footer .widget ul li a:hover,
.vc-footer-grid .widget ul li a:hover,
.vc-footer ul li a:hover,
.vc-footer-grid ul li a:hover {
  color: var(--vc-primary);
  padding-left: var(--vc-space-2);
}

/* Specifically target WordPress default widgets in footer */
.vc-footer .widget_archive ul,
.vc-footer .widget_categories ul,
.vc-footer .widget_pages ul,
.vc-footer .widget_meta ul,
.vc-footer .widget_nav_menu ul {
  list-style-type: none !important;
}

.vc-footer .widget_archive ul li,
.vc-footer .widget_categories ul li,
.vc-footer .widget_pages ul li,
.vc-footer .widget_meta ul li,
.vc-footer .widget_nav_menu ul li {
  list-style: none !important;
  padding-left: 0 !important;
}

/* Footer column headings that aren't widgets */
.vc-footer-column h2,
.vc-footer-column h3,
.vc-footer-column h4 {
  font-size: var(--vc-text-base);
  font-weight: var(--vc-font-semibold);
  color: var(--vc-text-primary);
  margin-bottom: var(--vc-space-5);
}

/* =====================================================
   AGGRESSIVE FOOTER WIDGET OVERRIDES
   These override WordPress default widget styling
   ===================================================== */

/* Remove ALL list styling in footer */
footer ul,
footer ol,
#colophon ul,
#colophon ol,
.vc-footer ul,
.vc-footer ol,
.vc-footer-main ul,
.vc-footer-main ol,
.vc-footer-grid ul,
.vc-footer-grid ol,
.vc-footer-column ul,
.vc-footer-column ol,
.site-footer ul,
.site-footer ol {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

footer ul li,
footer ol li,
#colophon ul li,
#colophon ol li,
.vc-footer ul li,
.vc-footer ol li,
.vc-footer-main ul li,
.vc-footer-main ol li,
.vc-footer-grid ul li,
.vc-footer-grid ol li,
.vc-footer-column ul li,
.vc-footer-column ol li {
  list-style: none !important;
  list-style-type: none !important;
  padding: var(--vc-space-2) 0 !important;
  margin: 0 !important;
}

footer ul li::before,
footer ol li::before,
#colophon ul li::before,
#colophon ol li::before,
.vc-footer ul li::before,
.vc-footer ol li::before {
  content: none !important;
  display: none !important;
}

footer ul li::marker,
footer ol li::marker,
#colophon ul li::marker,
#colophon ol li::marker,
.vc-footer ul li::marker,
.vc-footer ol li::marker {
  content: none !important;
  display: none !important;
  font-size: 0 !important;
}

/* Footer links styling */
footer a,
#colophon a,
.vc-footer-main a,
.vc-footer-grid a,
.vc-footer-column a {
  color: var(--vc-text-secondary);
  text-decoration: none;
  transition: color var(--vc-transition-fast), padding-left var(--vc-transition-fast);
}

footer li a:hover,
#colophon li a:hover,
.vc-footer-main li a:hover,
.vc-footer-grid li a:hover,
.vc-footer-column li a:hover {
  color: var(--vc-primary) !important;
  padding-left: var(--vc-space-2);
}

/* Widget titles in footer */
footer h2,
footer h3,
footer h4,
#colophon h2,
#colophon h3,
#colophon h4,
.vc-footer-main h2,
.vc-footer-main h3,
.vc-footer-main h4,
.vc-footer-grid h2,
.vc-footer-grid h3,
.vc-footer-grid h4,
.vc-footer-column h2,
.vc-footer-column h3,
.vc-footer-column h4 {
  font-size: var(--vc-text-base) !important;
  font-weight: var(--vc-font-semibold) !important;
  color: var(--vc-text-primary) !important;
  margin-bottom: var(--vc-space-4) !important;
  margin-top: 0 !important;
}

/* =====================================================
   READING PROGRESS BAR
   ===================================================== */

.vc-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--vc-bg-secondary);
  z-index: var(--vc-z-sticky);
}

.vc-reading-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--vc-primary), var(--vc-secondary));
  transition: width 0.1s ease-out;
}

/* Reading progress indicator (percentage) */
.vc-reading-indicator {
  position: fixed;
  bottom: var(--vc-space-6);
  right: var(--vc-space-6);
  width: 50px;
  height: 50px;
  background: var(--vc-surface);
  border-radius: var(--vc-radius-full);
  box-shadow: var(--vc-shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--vc-text-xs);
  font-weight: var(--vc-font-bold);
  color: var(--vc-primary);
  z-index: var(--vc-z-sticky);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--vc-transition-base), transform var(--vc-transition-base);
}

.vc-reading-indicator.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   SINGLE POST LAYOUT
   ===================================================== */

.vc-single-post {
  background: var(--vc-bg-primary);
}

.vc-article-header {
  background: linear-gradient(135deg, var(--vc-bg-secondary) 0%, var(--vc-bg-primary) 100%);
  padding: var(--vc-space-16) 0;
  text-align: center;
}

.vc-article-header-content {
  max-width: 800px;
  margin: 0 auto;
}

.vc-article-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: var(--vc-font-bold);
  line-height: var(--vc-leading-tight);
  margin: var(--vc-space-4) 0;
}

.vc-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--vc-space-6);
  margin-top: var(--vc-space-6);
}

.vc-meta-author {
  display: flex;
  align-items: center;
  gap: var(--vc-space-3);
}

.vc-meta-author img {
  width: 48px;
  height: 48px;
  border-radius: var(--vc-radius-full);
}

.vc-meta-author-info a {
  font-weight: var(--vc-font-medium);
  color: var(--vc-text-primary);
}

.vc-meta-info {
  display: flex;
  align-items: center;
  gap: var(--vc-space-4);
  color: var(--vc-text-secondary);
  font-size: var(--vc-text-sm);
}

.vc-article-featured-image {
  margin-top: calc(-1 * var(--vc-space-8));
  padding: 0 var(--vc-space-4);
}

.vc-featured-figure {
  max-width: 900px;
  margin: 0 auto;
  border-radius: var(--vc-radius-xl);
  overflow: hidden;
  box-shadow: var(--vc-shadow-xl);
}

.vc-featured-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.vc-article-body {
  padding: var(--vc-space-12) 0;
}

.vc-article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vc-space-8);
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 1200px) {
  .vc-article-layout {
    grid-template-columns: 60px 1fr 280px;
    max-width: 1200px;
  }
}

/* =====================================================
   SHARE BUTTONS (FLOATING)
   ===================================================== */

.vc-share-floating {
  display: none;
}

@media (min-width: 1200px) {
  .vc-share-floating {
    display: block;
  }
}

.vc-share-sticky {
  position: sticky;
  top: var(--vc-space-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vc-space-3);
}

.vc-share-label {
  font-size: var(--vc-text-xs);
  font-weight: var(--vc-font-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--vc-text-tertiary);
  writing-mode: vertical-rl;
  margin-bottom: var(--vc-space-2);
}

.vc-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--vc-radius-full);
  background: var(--vc-bg-secondary);
  color: var(--vc-text-secondary);
  transition: all var(--vc-transition-fast);
}

.vc-share-btn:hover {
  transform: scale(1.1);
}

.vc-share-facebook:hover {
  background: #1877F2;
  color: white;
}

.vc-share-twitter:hover {
  background: #000;
  color: white;
}

.vc-share-linkedin:hover {
  background: #0A66C2;
  color: white;
}

/* =====================================================
   TABLE OF CONTENTS
   ===================================================== */

.vc-toc {
  background: var(--vc-bg-secondary);
  border-radius: var(--vc-radius-xl);
  padding: var(--vc-space-6);
  margin-bottom: var(--vc-space-8);
}

.vc-toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--vc-space-4);
  cursor: pointer;
}

.vc-toc-title {
  display: flex;
  align-items: center;
  gap: var(--vc-space-2);
  font-size: var(--vc-text-base);
  font-weight: var(--vc-font-semibold);
  color: var(--vc-text-primary);
}

.vc-toc-toggle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vc-text-tertiary);
  transition: transform var(--vc-transition-fast);
}

.vc-toc.collapsed .vc-toc-toggle {
  transform: rotate(180deg);
}

.vc-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vc-toc.collapsed .vc-toc-list {
  display: none;
}

.vc-toc-item {
  padding: var(--vc-space-2) 0;
}

.vc-toc-item a {
  display: flex;
  align-items: center;
  gap: var(--vc-space-2);
  color: var(--vc-text-secondary);
  font-size: var(--vc-text-sm);
  text-decoration: none;
  transition: color var(--vc-transition-fast);
}

.vc-toc-item a::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--vc-primary);
  border-radius: var(--vc-radius-full);
  opacity: 0.5;
  transition: opacity var(--vc-transition-fast);
}

.vc-toc-item a:hover {
  color: var(--vc-primary);
}

.vc-toc-item a:hover::before,
.vc-toc-item a.active::before {
  opacity: 1;
}

.vc-toc-item.level-3 a {
  padding-left: var(--vc-space-4);
  font-size: var(--vc-text-xs);
}

/* Sidebar TOC (sticky) */
.vc-sidebar-toc {
  position: sticky;
  top: var(--vc-space-24);
}

.vc-sidebar-toc .vc-toc {
  background: transparent;
  padding: 0;
}

/* =====================================================
   ARTICLE CONTENT STYLING
   ===================================================== */

.vc-article-content {
  min-width: 0;
}

.vc-content-body {
  font-size: var(--vc-text-lg);
  line-height: var(--vc-leading-relaxed);
  color: var(--vc-text-primary);
}

.vc-content-body p {
  margin-bottom: var(--vc-space-6);
}

.vc-content-body h2 {
  font-size: var(--vc-text-2xl);
  font-weight: var(--vc-font-bold);
  margin: var(--vc-space-10) 0 var(--vc-space-4);
  scroll-margin-top: var(--vc-space-20);
}

.vc-content-body h3 {
  font-size: var(--vc-text-xl);
  font-weight: var(--vc-font-semibold);
  margin: var(--vc-space-8) 0 var(--vc-space-4);
  scroll-margin-top: var(--vc-space-20);
}

.vc-content-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--vc-radius-lg);
  margin: var(--vc-space-6) 0;
}

.vc-content-body blockquote {
  border-left: 4px solid var(--vc-primary);
  padding-left: var(--vc-space-6);
  margin: var(--vc-space-8) 0;
  font-style: italic;
  color: var(--vc-text-secondary);
}

.vc-content-body ul,
.vc-content-body ol {
  margin: var(--vc-space-6) 0;
  padding-left: var(--vc-space-6);
}

.vc-content-body li {
  margin-bottom: var(--vc-space-2);
}

/* =====================================================
   POST NAVIGATION
   ===================================================== */

.vc-post-navigation {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vc-space-4);
  margin: var(--vc-space-12) 0;
}

@media (min-width: 640px) {
  .vc-post-navigation {
    grid-template-columns: 1fr 1fr;
  }
}

.vc-nav-card {
  display: block;
  padding: var(--vc-space-6);
  background: var(--vc-bg-secondary);
  border-radius: var(--vc-radius-xl);
  text-decoration: none;
  transition: all var(--vc-transition-base);
}

.vc-nav-card:hover {
  background: var(--vc-primary);
  color: white;
  transform: translateY(-2px);
}

.vc-nav-direction {
  font-size: var(--vc-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--vc-text-tertiary);
  margin-bottom: var(--vc-space-2);
  display: block;
}

.vc-nav-card:hover .vc-nav-direction {
  color: rgba(255, 255, 255, 0.7);
}

.vc-nav-title {
  font-weight: var(--vc-font-medium);
  color: var(--vc-text-primary);
  display: block;
}

.vc-nav-card:hover .vc-nav-title {
  color: white;
}

.vc-nav-next {
  text-align: right;
}