/*
 * Valens Theme - Custom Hover States (Revised)
 * Takes nested elements within links into account for robust styling.
 */

/* ========================================================================
   1. Button Hover States
   ======================================================================== */

/* General Button Transitions */
.btn {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Primary Button (e.g., "Plan een kennismaking") */
.btn-primary:hover {
    background-color: #000; /* A darker version of --cta-color */
    border-color: #000;
}

/* Outline Light Button (e.g., Hero Section Buttons) */
.btn-outline-light:hover {
    background-color: var(--white);
    color: var(--darker-grey); /* Fallback color for the <a> tag */
}

/* Target the inner .label and .icon-arrow spans specifically */
.btn-outline-light:hover .label {
    color: var(--darker-grey);
}

.btn-outline-light:hover .icon-arrow {
    background-image: var(--arrow-right-dark);
}

/* Outline Dark Button (e.g., Service & CTA Cards) */
.btn-outline-dark:hover {
    background-color: var(--darker-grey);
    color: var(--white); /* Fallback color for the <a> tag */
}

/* Target the inner .label and .icon-arrow spans specifically */
.btn-outline-dark:hover .label {
    color: var(--white);
}

.btn-outline-dark:hover .icon-arrow {
    background-image: var(--arrow-right-white);
}


/* ========================================================================
   2. Navigation & Links Hover States
   ======================================================================== */

/* Main Header Navigation */
.site-header__nav-menu .menu-item a:hover {
    color: #e6dcdb; /* A subtle hover using the --sand color */
}

body.scrolled .site-header__nav-menu .menu-item a:hover {
    color: #fff; /* White hover color on the terracotta scrolled header */
}

/* Sub-Menu Promo Link */
.sub-menu__promo-link {
    transition: text-decoration 0.3s ease;
}
.sub-menu__promo-link .icon-arrow {
    transition: transform 0.3s ease;
}
.sub-menu__promo-link:hover {
    text-decoration: underline;
}
.sub-menu__promo-link:hover .icon-arrow {
    transform: translateX(5px);
}


/* Mobile Navigation */
.mobile-nav__menu .menu-item a:hover {
    background-color: #f0e9e8; /* A lighter version of --sand */
}

.mobile-nav__menu .sub-menu .menu-item a:hover {
    color: var(--cta-color);
    background-color: transparent;
}

/* Footer & Breadcrumb Links */
.site-footer__nav .menu-item a:hover,
.bottom-bar__links .menu-item a:hover,
.service-hero__breadcrumbs a:hover,
.blog-breadcrumb__nav a:hover {
    text-decoration: underline;
}

/* Back Button in Blog */
.back-button:hover {
    background-color: var(--darker-grey);
    color: var(--white);
    border-color: var(--darker-grey);
}


/* ========================================================================
   3. Card Hover States
   ======================================================================== */

/* General Card Transition */
.service-card,
.team-member-card,
.blog-card,
.blog-section__featured-post,
.expertise-card,
.pricing-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Card Hover Effect */
.blog-card:hover,
.blog-section__featured-post:hover,
.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Card-Specific Text Color Changes on Hover */
.team-member-card:hover,
.team-member-card:hover .team-member-card__name,
.team-member-card:hover .team-member-card__title {
    color: var(--cta-color);
}

.blog-card:hover .blog-card__title {
    color: var(--cta-color);
}


/* ========================================================================
   4. Other Interactive Elements
   ======================================================================== */

/* Social Media Icons in Footer */
.site-footer__social-icons a {
    transition: transform 0.3s ease;
}
.site-footer__social-icons a:hover {
    transform: scale(1.1);
}
.site-footer__social-icons a:hover svg {
    fill: var(--sand);
}

/* Testimonial Navigation Arrows */
.testimonials-section__nav .arrow-prev:hover,
.testimonials-section__nav .arrow-next:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Contact Info Card Links */
.contact-info-card a:hover {
    text-decoration: underline;
}