/**
 * Color Palette - Clean Rebuild
 * Systematische kleur styling voor Gutenberg blocks
 */

/* ============================================
   TEXT COLORS
   ============================================ */

.has-primary-color {
    /* Gebruik WP preset primary zodat editor en frontend gelijk zijn */
    color: var(--wp--preset--color--primary, var(--color-primary, #1B4E0C)) !important;
}

.has-secondary-color {
    color: var(--wp--preset--color--secondary, var(--color-secondary, #2C7A1F)) !important;
}

.has-accent-color {
    color: var(--color-accent, #4CAF50) !important;
}

.has-text-color:not(.wp-element-button):not(.wp-block-button__link):not(.kb-button) {
    color: var(--color-text, #333333) !important;
}

.has-text-light-color {
    color: var(--color-text-light, #666666) !important;
}

.has-heading-color {
    color: var(--color-heading, #1a1a1a) !important;
}

.has-success-color {
    color: var(--color-success, #4CAF50) !important;
}

.has-warning-color {
    color: var(--color-warning, #FF9800) !important;
}

.has-error-color {
    color: var(--color-error, #F44336) !important;
}

.has-info-color {
    color: var(--color-info, #2196F3) !important;
}

.has-white-color {
    color: #ffffff !important;
}

.has-black-color {
    color: #000000 !important;
}

/* ============================================
   LINK COLORS - HIGHEST PRIORITY
   Links should use their OWN color, not parent color
   ============================================ */

/* Force all links to be underlined */
a {
    text-decoration: underline !important;
}

/* Navigation links - no underline and white color - HIGHEST PRIORITY */
.site-header .main-navigation a,
.site-header #primary-menu a,
.site-header .primary-menu-container a,
.site-header nav a,
.site-header .menu a,
header .main-navigation a,
header #primary-menu a,
header nav a {
    text-decoration: none !important;
    color: #ffffff !important;
}

.site-header .main-navigation a:hover,
.site-header #primary-menu a:hover,
.site-header .primary-menu-container a:hover,
.site-header nav a:hover,
.site-header .menu a:hover,
header .main-navigation a:hover,
header #primary-menu a:hover,
header nav a:hover {
    text-decoration: none !important;
    color: #ffffff !important;
    opacity: 0.8;
}

/* Override any link color classes in navigation */
.site-header a[class*="has-"],
header a[class*="has-"],
.site-header .has-link-color,
header .has-link-color,
.main-navigation .has-link-color,
#primary-menu .has-link-color {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Specifically target menu items with link color class */
.menu-item a.has-link-color,
.menu-item a[class*="has-"],
li[class*="menu-item"] a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* CRITICAL: Links with data-link-color attribute use that color */
a[data-link-color] {
    color: attr(data-link-color) !important;
}

/* Links inside colored paragraphs should NOT inherit the paragraph color */
.has-primary-color a:not([class*="has-"]):not([style*="color"]),
.has-secondary-color a:not([class*="has-"]):not([style*="color"]),
.has-accent-color a:not([class*="has-"]):not([style*="color"]),
.has-error-color a:not([class*="has-"]):not([style*="color"]),
.has-success-color a:not([class*="has-"]):not([style*="color"]),
.has-warning-color a:not([class*="has-"]):not([style*="color"]),
.has-info-color a:not([class*="has-"]):not([style*="color"]),
p[class*="has-"][class*="-color"] a:not([class*="has-"]):not([style*="color"]) {
    color: var(--color-link) !important;
}

/* Links with inline color styles - MUST preserve the inline color */
p a[style*="color"],
a[style*="color"] {
    /* Inline style will set the color, we just ensure underline */
    text-decoration: underline !important;
}

/* WordPress link color support via CSS variables */
.has-link-color a:not(.kb-button) {
    color: var(--wp--preset--color--info, #2196F3) !important;
    text-decoration: underline !important;
}

/* BUT: Navigation links override this */
.site-header .has-link-color,
header .has-link-color,
nav .has-link-color,
.menu .has-link-color,
.main-navigation .has-link-color {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Specific color support */
p[class*="has-"][class*="-link-color"] a,
[class*="has-"][class*="-link-color"] a {
    text-decoration: underline !important;
}


a.has-primary-color:not(.kb-button),
a.has-primary-color:not(.kb-button):link,
a.has-primary-color:not(.kb-button):visited,
a.has-primary-color:not(.kb-button):hover,
a.has-primary-color:not(.kb-button):active {
    color: var(--color-primary, #1B4E0C) !important;
    text-decoration: underline !important;
}

a.has-secondary-color:not(.kb-button),
a.has-secondary-color:not(.kb-button):link,
a.has-secondary-color:not(.kb-button):visited,
a.has-secondary-color:not(.kb-button):hover,
a.has-secondary-color:not(.kb-button):active {
    color: var(--color-secondary, #2C7A1F) !important;
    text-decoration: underline !important;
}

a.has-accent-color:not(.kb-button),
a.has-accent-color:not(.kb-button):link,
a.has-accent-color:not(.kb-button):visited,
a.has-accent-color:not(.kb-button):hover,
a.has-accent-color:not(.kb-button):active {
    color: var(--color-accent, #4CAF50) !important;
    text-decoration: underline !important;
}

a.has-info-color:not(.kb-button),
a.has-info-color:not(.kb-button):link,
a.has-info-color:not(.kb-button):visited,
a.has-info-color:not(.kb-button):hover,
a.has-info-color:not(.kb-button):active {
    color: var(--color-info, #2196F3) !important;
    text-decoration: underline !important;
}

a.has-error-color:not(.kb-button),
a.has-error-color:not(.kb-button):visited {
    color: var(--color-error, #F44336) !important;
    text-decoration: underline;
}

a.has-success-color:not(.kb-button),
a.has-success-color:not(.kb-button):visited {
    color: var(--color-success, #4CAF50) !important;
    text-decoration: underline;
}

a.has-warning-color:not(.kb-button),
a.has-warning-color:not(.kb-button):visited {
    color: var(--color-warning, #FF9800) !important;
    text-decoration: underline;
}

a.has-white-color:not(.kb-button),
a.has-white-color:not(.kb-button):visited {
    color: #ffffff !important;
    text-decoration: underline;
}

a.has-black-color:not(.kb-button),
a.has-black-color:not(.kb-button):visited {
    color: #000000 !important;
    text-decoration: underline;
}

/* Links inside colored paragraphs - link color wins */
.has-primary-color a.has-info-color,
.has-secondary-color a.has-info-color,
.has-accent-color a.has-info-color,
.has-error-color a.has-info-color,
.has-success-color a.has-info-color,
.has-warning-color a.has-info-color,
p.has-primary-color a.has-info-color {
    color: var(--color-info, #2196F3) !important;
}


/* ============================================
   BACKGROUND COLORS
   ============================================ */

.has-primary-background-color {
    /* Gebruik WP preset primary background */
    background-color: var(--wp--preset--color--primary, var(--color-primary, #1B4E0C)) !important;
}

.has-secondary-background-color {
    background-color: var(--wp--preset--color--secondary, var(--color-secondary, #2C7A1F)) !important;
}

.has-accent-background-color {
    /* Gebruik de WordPress kleurpreset voor accent, zodat editor en frontend gelijk zijn */
    background-color: var(--wp--preset--color--accent, #4CAF50) !important;
}

.has-text-background-color {
    background-color: var(--color-text, #333333) !important;
}

.has-text-light-background-color {
    background-color: var(--color-text-light, #666666) !important;
}

.has-heading-background-color {
    background-color: var(--color-heading, #1a1a1a) !important;
}

.has-background-background-color:not(.wp-element-button):not(.wp-block-button__link):not(.kb-button) {
    background-color: var(--color-background, #ffffff) !important;
}

.has-background-alt-background-color {
    background-color: var(--color-background-alt, #f5f5f5) !important;
}

.has-border-background-color {
    background-color: var(--color-border, #e0e0e0) !important;
}

.has-success-background-color {
    background-color: var(--color-success, #4CAF50) !important;
}

.has-warning-background-color {
    background-color: var(--color-warning, #FF9800) !important;
}

.has-error-background-color {
    background-color: var(--color-error, #F44336) !important;
}

.has-info-background-color {
    background-color: var(--color-info, #2196F3) !important;
}

.has-white-background-color {
    background-color: #ffffff !important;
}

.has-black-background-color {
    background-color: #000000 !important;
}

/* ============================================
   GRADIENT BACKGROUNDS
   ============================================ */

.has-primary-to-secondary-gradient-background {
    background: linear-gradient(135deg, var(--color-primary, #1B4E0C) 0%, var(--color-secondary, #2C7A1F) 100%) !important;
}

.has-primary-to-accent-gradient-background {
    background: linear-gradient(135deg, var(--color-primary, #1B4E0C) 0%, var(--color-accent, #4CAF50) 100%) !important;
}

.has-dark-to-light-gradient-background {
    background: linear-gradient(135deg, var(--color-heading, #1a1a1a) 0%, var(--color-text-light, #666666) 100%) !important;
}

.has-primary-overlay-gradient-background {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--color-primary, #1B4E0C) 100%) !important;
}

/* ============================================
   WORDPRESS BLOCK SPECIFIC
   ============================================ */

.wp-block-paragraph.has-primary-color,
.wp-block-heading.has-primary-color {
    color: var(--color-primary, #1B4E0C);
}

.wp-block-paragraph.has-secondary-color,
.wp-block-heading.has-secondary-color {
    color: var(--color-secondary, #2C7A1F);
}

.wp-block-paragraph.has-error-color,
.wp-block-heading.has-error-color {
    color: var(--color-error, #F44336);
}

.wp-block-paragraph.has-success-color,
.wp-block-heading.has-success-color {
    color: var(--color-success, #4CAF50);
}

.wp-block-paragraph.has-warning-color,
.wp-block-heading.has-warning-color {
    color: var(--color-warning, #FF9800);
}

.wp-block-paragraph.has-info-color,
.wp-block-heading.has-info-color {
    color: var(--color-info, #2196F3);
}

/* (Kadence en core button specifieke overrides zijn verwijderd zodat blokken zelf hun kleuren volledig bepalen) */