/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.2
*/

/* ===== SRGB fallbacks (veilig voor alle browsers) ===== */
:root {
    --brand-text: #111111;
    --brand-accent: #0f6d3d;
    --text-dim: #666666;
    --link-hover: #0a8a4f;
}

/* Basis-tekst/links */
body,
.container-wrap,
.woocommerce,
.widget,
.footer,
.nectar-global-section {
    color: var(--brand-text);
}

a,
a:link,
.menu a,
.sf-menu a,
.footer a,
.woocommerce a,
.woocommerce-loop-product__title,
.nectar-cta,
.nectar-button,
.nectar-animated-title,
.widget a {
    color: var(--brand-accent);
}

a:hover,
.menu a:hover,
.footer a:hover,
.woocommerce a:hover,
.widget a:hover {
    color: var(--link-hover);
}

/* Subinfo/meta met brede support */
.meta,
.excerpt,
.widget .textwidget,
.woocommerce .price,
.small,
.note {
    color: #666666;
    /* fallback */
    color: rgba(0, 0, 0, .6);
}

/* ===== Moderne kleuren alleen als ondersteund ===== */
@supports (color: oklch(1 0 0)) {
    :root {
        --brand-text: oklch(27% 0.02 240);
        --brand-accent: oklch(60% 0.12 160);
        --text-dim: oklch(45% 0 0);
        --link-hover: oklch(68% 0.14 160);
    }
}

/* ===========================
   CookieYes – AA contrast fix
   =========================== */
.cky-consent-bar,
.cky-consent-container {
    background: #fff !important;
    color: #222 !important;
    border-color: #e0e0e0 !important;
}

.cky-overlay {
    background: rgba(0, 0, 0, .5) !important;
}

.cky-consent-bar .cky-btn-accept,
button.cky-btn[data-cky-tag="accept-button"],
button.cky-btn[data-cky-tag="accept-button"][style*="background-color:#9cc455"],
button.cky-btn[data-cky-tag="accept-button"][style*="background-color: #9cc455"] {
    background: #1b5e20 !important;
    color: #fff !important;
    border-color: #1b5e20 !important;
}

.cky-consent-bar .cky-btn-accept:hover,
.cky-consent-bar .cky-btn-accept:focus,
button.cky-btn[data-cky-tag="accept-button"]:hover,
button.cky-btn[data-cky-tag="accept-button"]:focus {
    background: #124116 !important;
    border-color: #124116 !important;
}

.cky-consent-bar .cky-btn-reject,
.cky-consent-bar .cky-btn-customize,
button.cky-btn[data-cky-tag="reject-button"],
button.cky-btn[data-cky-tag="settings-button"],
button.cky-btn[style*="background-color:transparent"][style*="color:#9cc455"],
button.cky-btn[style*="background-color: transparent"][style*="color:#9cc455"],
button.cky-btn[style*="background-color:transparent"][style*="color: #9cc455"],
button.cky-btn[style*="background-color: transparent"][style*="color: #9cc455"] {
    background: #fff !important;
    color: #2b6f2e !important;
    border-color: #2b6f2e !important;
    border-width: 2px !important;
}

.cky-consent-bar .cky-btn-reject:hover,
.cky-consent-bar .cky-btn-customize:hover,
button.cky-btn[data-cky-tag="reject-button"]:hover,
button.cky-btn[data-cky-tag="settings-button"]:hover {
    background: #e8f2ea !important;
    color: #1b5e20 !important;
    border-color: #1b5e20 !important;
}

.cky-consent-bar .cky-btn:focus-visible,
button.cky-btn:focus-visible {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px;
}

/* ===========================
   Footer: kolom 1 wit op donker
   =========================== */
#footer-outer .row>div:first-child,
#footer-outer .row>div:first-child * {
    color: #ffffff !important;
}

#footer-outer .row>div:first-child a:hover {
    color: #cde7ff !important;
}

/* ===========================
   Groene CTA’s (#9cc455) – Gutenberg + Nectar
   =========================== */
.wp-block-button__link[style*="background-color:#9cc455"],
.wp-block-button__link[style*="background-color: #9cc455"] {
    color: #103b1a !important;
}

.wp-block-button__link[style*="background-color:#9cc455"]:hover,
.wp-block-button__link[style*="background-color: #9cc455"]:hover {
    color: #ffffff !important;
}

a.nectar-button[style*="background-color:#9cc455"],
a.nectar-button[style*="background-color: #9cc455"],
a.nectar-button.accent-color,
a.nectar-button.regular-button.accent-color {
    color: #103b1a !important;
}

a.nectar-button span {
    color: inherit !important;
}

a.nectar-button:hover,
a.nectar-button:focus {
    color: #ffffff !important;
}

a.nectar-button:hover span,
a.nectar-button:focus span {
    color: #ffffff !important;
}

a.nectar-button:hover::before,
a.nectar-button:focus::before {
    background-color: #3a7f1f !important;
    opacity: 1 !important;
}

/* ======================================================
   PRESTATIE: “Niet-samengestelde animaties vermijden”
   (1) beperk transitions tot transform/opacity
   (2) schakel dure properties uit
   (3) optioneel: mobiel kill-switch
   ====================================================== */

/* (1) Beperk transitions op veelgebruikte UI-elementen */
a,
button,
.button,
a.nectar-button,
.wp-block-button__link,
.woocommerce ul.products li.product,
.woocommerce ul.products li.product a img,
.nectar-fancy-box,
.nectar-cta,
.nectar-animated-title,
.portfolio-items .work-item,
.blog-recent .inner-wrap,
.img-with-animation-wrap,
.img-with-aniamtion-wrap,
.tilt-button-inner,
.hover-wrap {
    will-change: transform, opacity;
    transition-property: transform, opacity !important;
    transition-duration: .25s !important;
    transition-timing-function: ease !important;
}

/* (2) Zorg dat hovers via transform gaan i.p.v. margin/left/width/… */
a.nectar-button:hover,
.wp-block-button__link:hover,
.woocommerce ul.products li.product a:hover img,
.portfolio-items .work-item:hover,
.blog-recent .inner-wrap:hover {
    transform: translateY(-1px) scale(1.01);
}

/* (2b) Dure effecten uitschakelen (box-shadow/background-color/border-radius animaties) */
a.nectar-button,
a.nectar-button::before,
.wp-block-button__link {
    box-shadow: none !important;
}

.nectar-fancy-box,
.portfolio-items .work-item,
.blog-recent .inner-wrap {
    box-shadow: none !important;
}

/* (3) Mobiele kill-switch: geen animaties/overgangen onder 768px */
@media (max-width: 768px) {
    * {
        animation: none !important;
    }

    a,
    button,
    .button,
    a.nectar-button,
    .wp-block-button__link,
    .woocommerce ul.products li.product,
    .woocommerce ul.products li.product a img,
    .nectar-fancy-box,
    .nectar-cta,
    .nectar-animated-title,
    .portfolio-items .work-item,
    .blog-recent .inner-wrap,
    .img-with-animation-wrap,
    .img-with-aniamtion-wrap,
    .tilt-button-inner,
    .hover-wrap {
        transition: none !important;
    }
}
/* Product images: alleen transform/opacity animeren (geen border-radius) */
.woocommerce ul.products li.product a img,
img.attachment-woocommerce_thumbnail {
  transition: transform .35s ease, opacity .35s ease !important;
}
/* voorkom radius-wijzigingen op hover (dus geen animatie) */
.woocommerce ul.products li.product:hover a img {
  border-radius: inherit !important;
}