:root {
  --primary-color: #3A6BA5;
  --secondary-color: #466D5D;
  --background-color: #EDE6DA;
  --white-color: #FFFFFF;
  --accent-color: #FFD369;
  --font-family-primary: 'Playfair Display', serif;
  --font-family-secondary: 'Lato', sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.5;
}

/* Custom utility classes using CSS variables */
.bg-primary-500 {
  background-color: var(--primary-color);
}

.bg-primary-600 {
  background-color: color-mix(in srgb, var(--primary-color) 80%, black);
}

.hover\:bg-primary-500:hover {
  background-color: var(--primary-color);
}

.hover\:bg-primary-600:hover {
  background-color: color-mix(in srgb, var(--primary-color) 80%, black);
}

.hover\:bg-secondary-500:hover {
  background-color: var(--secondary-color);
}

.hover\:bg-secondary-600:hover {
  background-color: color-mix(in srgb, var(--secondary-color) 80%, black);
}

.hover\:bg-accent-500:hover {
  background-color: var(--accent-color);
}

.hover\:bg-accent-600:hover {
  background-color: color-mix(in srgb, var(--accent-color) 80%, black);
}

.hover\:bg-theme-background:hover {
  background-color: var(--background-color);
}

.hover\:bg-white-custom:hover {
  background-color: var(--white-color);
}

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

.border-primary-500 {
  border-color: var(--primary-color);
}

/* Additional utility classes */
.bg-secondary-500 {
  background-color: var(--secondary-color);
}

.bg-accent-500 {
  background-color: var(--accent-color);
}

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

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

/* Theme Background Color Classes */
.bg-theme-background {
  background-color: var(--background-color);
}

.text-theme-background {
  color: var(--background-color);
}

/* White Color Classes */
.bg-white-custom {
  background-color: var(--white-color);
}

.text-white-custom {
  color: var(--white-color);
}

/* Hover Text Color Classes */
.hover\:text-primary-500:hover {
  color: var(--primary-color);
}

.hover\:text-primary-600:hover {
  color: color-mix(in srgb, var(--primary-color) 80%, black);
}

.hover\:text-secondary-500:hover {
  color: var(--secondary-color);
}

.hover\:text-secondary-600:hover {
  color: color-mix(in srgb, var(--secondary-color) 80%, black);
}

.hover\:text-accent-500:hover {
  color: var(--accent-color);
}

.hover\:text-accent-600:hover {
  color: color-mix(in srgb, var(--accent-color) 80%, black);
}

.hover\:text-theme-background:hover {
  color: var(--background-color);
}

.hover\:text-white-custom:hover {
  color: var(--white-color);
}

/* Global header styles for wat-plugin blocks */
.wat-plugin {
  /* Apply to all headers individually for better specificity */
  h1, h2, h3, h4, h5, h6 {
    color: var(--secondary-color) !important; /* Secondary theme color from WebArchitect options */
  }
  
  /* Apply to all links within headers */
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: var(--secondary-color) !important; /* Secondary theme color for header links */
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: color-mix(in srgb, var(--secondary-color) 80%, black) !important; /* Darker secondary color on hover */
    text-decoration: underline;
  }
  
  h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus {
    color: color-mix(in srgb, var(--secondary-color) 70%, black) !important; /* Even darker for focus */
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
  }
  
  /* Specific block overrides for extra specificity */
  .wat-posts-block h1, .wat-posts-block h2, .wat-posts-block h3, .wat-posts-block h4, .wat-posts-block h5, .wat-posts-block h6 {
    color: var(--secondary-color) !important;
  }
  
  .wat-posts-block h1 a, .wat-posts-block h2 a, .wat-posts-block h3 a, .wat-posts-block h4 a, .wat-posts-block h5 a, .wat-posts-block h6 a {
    color: var(--secondary-color) !important;
  }
  
  .wat-posts-block h1 a:hover, .wat-posts-block h2 a:hover, .wat-posts-block h3 a:hover, .wat-posts-block h4 a:hover, .wat-posts-block h5 a:hover, .wat-posts-block h6 a:hover {
    color: color-mix(in srgb, var(--secondary-color) 80%, black) !important;
  }
  
  .wat-feature-block h1, .wat-feature-block h2, .wat-feature-block h3, .wat-feature-block h4, .wat-feature-block h5, .wat-feature-block h6 {
    color: var(--secondary-color) !important;
  }
  
  .wat-feature-block h1 a, .wat-feature-block h2 a, .wat-feature-block h3 a, .wat-feature-block h4 a, .wat-feature-block h5 a, .wat-feature-block h6 a {
    color: var(--secondary-color) !important;
  }
  
  .wat-feature-block h1 a:hover, .wat-feature-block h2 a:hover, .wat-feature-block h3 a:hover, .wat-feature-block h4 a:hover, .wat-feature-block h5 a:hover, .wat-feature-block h6 a:hover {
    color: color-mix(in srgb, var(--secondary-color) 80%, black) !important;
  }
  
  .wat-slider-block h1, .wat-slider-block h2, .wat-slider-block h3, .wat-slider-block h4, .wat-slider-block h5, .wat-slider-block h6 {
    color: var(--secondary-color) !important;
  }
  
  .wat-slider-block h1 a, .wat-slider-block h2 a, .wat-slider-block h3 a, .wat-slider-block h4 a, .wat-slider-block h5 a, .wat-slider-block h6 a {
    color: var(--secondary-color) !important;
  }
  
  .wat-slider-block h1 a:hover, .wat-slider-block h2 a:hover, .wat-slider-block h3 a:hover, .wat-slider-block h4 a:hover, .wat-slider-block h5 a:hover, .wat-slider-block h6 a:hover {
    color: color-mix(in srgb, var(--secondary-color) 80%, black) !important;
  }
}

/* WordPress block editor styles */
.wp-block-wat-plugin-wat-posts h1, .wp-block-wat-plugin-wat-posts h2, .wp-block-wat-plugin-wat-posts h3, .wp-block-wat-plugin-wat-posts h4, .wp-block-wat-plugin-wat-posts h5, .wp-block-wat-plugin-wat-posts h6,
.wp-block-wat-plugin-wat-feature h1, .wp-block-wat-plugin-wat-feature h2, .wp-block-wat-plugin-wat-feature h3, .wp-block-wat-plugin-wat-feature h4, .wp-block-wat-plugin-wat-feature h5, .wp-block-wat-plugin-wat-feature h6,
.wp-block-wat-plugin-wat-slider h1, .wp-block-wat-plugin-wat-slider h2, .wp-block-wat-plugin-wat-slider h3, .wp-block-wat-plugin-wat-slider h4, .wp-block-wat-plugin-wat-slider h5, .wp-block-wat-plugin-wat-slider h6 {
  color: var(--secondary-color) !important; /* Secondary theme color from WebArchitect options */
}

/* Links within headers in editor */
.wp-block-wat-plugin-wat-posts h1 a, .wp-block-wat-plugin-wat-posts h2 a, .wp-block-wat-plugin-wat-posts h3 a, .wp-block-wat-plugin-wat-posts h4 a, .wp-block-wat-plugin-wat-posts h5 a, .wp-block-wat-plugin-wat-posts h6 a,
.wp-block-wat-plugin-wat-feature h1 a, .wp-block-wat-plugin-wat-feature h2 a, .wp-block-wat-plugin-wat-feature h3 a, .wp-block-wat-plugin-wat-feature h4 a, .wp-block-wat-plugin-wat-feature h5 a, .wp-block-wat-plugin-wat-feature h6 a,
.wp-block-wat-plugin-wat-slider h1 a, .wp-block-wat-plugin-wat-slider h2 a, .wp-block-wat-plugin-wat-slider h3 a, .wp-block-wat-plugin-wat-slider h4 a, .wp-block-wat-plugin-wat-slider h5 a, .wp-block-wat-plugin-wat-slider h6 a {
  color: var(--secondary-color) !important; /* Secondary theme color for header links */
  text-decoration: none;
  transition: color 0.3s ease;
}

.wp-block-wat-plugin-wat-posts h1 a:hover, .wp-block-wat-plugin-wat-posts h2 a:hover, .wp-block-wat-plugin-wat-posts h3 a:hover, .wp-block-wat-plugin-wat-posts h4 a:hover, .wp-block-wat-plugin-wat-posts h5 a:hover, .wp-block-wat-plugin-wat-posts h6 a:hover,
.wp-block-wat-plugin-wat-feature h1 a:hover, .wp-block-wat-plugin-wat-feature h2 a:hover, .wp-block-wat-plugin-wat-feature h3 a:hover, .wp-block-wat-plugin-wat-feature h4 a:hover, .wp-block-wat-plugin-wat-feature h5 a:hover, .wp-block-wat-plugin-wat-feature h6 a:hover,
.wp-block-wat-plugin-wat-slider h1 a:hover, .wp-block-wat-plugin-wat-slider h2 a:hover, .wp-block-wat-plugin-wat-slider h3 a:hover, .wp-block-wat-plugin-wat-slider h4 a:hover, .wp-block-wat-plugin-wat-slider h5 a:hover, .wp-block-wat-plugin-wat-slider h6 a:hover {
  color: color-mix(in srgb, var(--secondary-color) 80%, black) !important; /* Darker secondary color on hover */
  text-decoration: underline;
}

.wp-block-wat-plugin-wat-posts h1 a:focus, .wp-block-wat-plugin-wat-posts h2 a:focus, .wp-block-wat-plugin-wat-posts h3 a:focus, .wp-block-wat-plugin-wat-posts h4 a:focus, .wp-block-wat-plugin-wat-posts h5 a:focus, .wp-block-wat-plugin-wat-posts h6 a:focus,
.wp-block-wat-plugin-wat-feature h1 a:focus, .wp-block-wat-plugin-wat-feature h2 a:focus, .wp-block-wat-plugin-wat-feature h3 a:focus, .wp-block-wat-plugin-wat-feature h4 a:focus, .wp-block-wat-plugin-wat-feature h5 a:focus, .wp-block-wat-plugin-wat-feature h6 a:focus,
.wp-block-wat-plugin-wat-slider h1 a:focus, .wp-block-wat-plugin-wat-slider h2 a:focus, .wp-block-wat-plugin-wat-slider h3 a:focus, .wp-block-wat-plugin-wat-slider h4 a:focus, .wp-block-wat-plugin-wat-slider h5 a:focus, .wp-block-wat-plugin-wat-slider h6 a:focus {
  color: color-mix(in srgb, var(--secondary-color) 70%, black) !important; /* Even darker for focus */
  outline: 2px solid var(--secondary-color);
  outline-offset: 2px;
}