/*
 * Washarevend Brand Accent
 * Unifies the old bright-green accent with the logo teal.
 *
 * Brand color: #329FA4
 * RGB: 50, 159, 164
 */

:root {
    --wv-brand: #329FA4;
    --wv-brand-dark: #287F83;
    --wv-brand-light: #48B4B9;
    --wv-brand-rgb: 50, 159, 164;
}


/* =========================================================
   1. Header / navigation
   ========================================================= */

/* Home / Products / Solutions / Projects / Quality / News / About hover */
#site-header nav a:not([href*="/contact/"]):hover,
#mobile-menu nav a:not([href*="/contact/"]):hover {
    color: var(--wv-brand) !important;
}

/* Header Contact Us */
#site-header a[href*="/contact/"],
#mobile-menu a[href*="/contact/"] {
    background-color: var(--wv-brand) !important;
    border-color: var(--wv-brand) !important;
}

#site-header a[href*="/contact/"]:hover,
#mobile-menu a[href*="/contact/"]:hover {
    background-color: var(--wv-brand-dark) !important;
    border-color: var(--wv-brand-dark) !important;
}


/* =========================================================
   2. Custom cursor / mouse halo
   ========================================================= */

.wv-cursor-dot {
    background: var(--wv-brand) !important;
    box-shadow: 0 0 12px rgba(var(--wv-brand-rgb), .80) !important;
}

.wv-cursor-ring {
    border-color: rgba(var(--wv-brand-rgb), .72) !important;
    background: rgba(var(--wv-brand-rgb), .035) !important;
}

body.wv-cursor-hover .wv-cursor-ring {
    border-color: var(--wv-brand) !important;
    background: rgba(var(--wv-brand-rgb), .10) !important;
    box-shadow: 0 0 18px rgba(var(--wv-brand-rgb), .16) !important;
}


/* =========================================================
   3. Existing Tailwind/custom "green" utilities site-wide
   This covers text, icons, borders, badges and buttons.
   ========================================================= */

[class~="text-green"],
[class~="text-green-500"],
[class~="text-emerald-500"] {
    color: var(--wv-brand) !important;
}

[class~="bg-green"],
[class~="bg-green-500"],
[class~="bg-emerald-500"] {
    background-color: var(--wv-brand) !important;
}

[class~="border-green"],
[class~="border-green-500"],
[class~="border-emerald-500"] {
    border-color: var(--wv-brand) !important;
}

[class~="bg-green/10"] {
    background-color: rgba(var(--wv-brand-rgb), .10) !important;
}

[class~="bg-green/20"] {
    background-color: rgba(var(--wv-brand-rgb), .20) !important;
}

[class~="bg-green/30"] {
    background-color: rgba(var(--wv-brand-rgb), .30) !important;
}

[class~="bg-green/90"] {
    background-color: rgba(var(--wv-brand-rgb), .90) !important;
}

[class~="hover:text-green"]:hover,
[class~="hover:text-green-500"]:hover {
    color: var(--wv-brand) !important;
}

[class~="hover:bg-green"]:hover,
[class~="hover:bg-green-500"]:hover {
    background-color: var(--wv-brand) !important;
}

[class~="hover:border-green"]:hover,
[class~="hover:border-green-500"]:hover {
    border-color: var(--wv-brand) !important;
}

[class~="focus:ring-green"]:focus,
[class~="focus:ring-green-500"]:focus {
    --tw-ring-color: rgba(var(--wv-brand-rgb), .45) !important;
}


/* Existing green gradient sections: keep the visual depth,
   but move the palette into the logo-teal family. */
[class~="bg-gradient-green"] {
    background-color: var(--wv-brand) !important;
    background-image: linear-gradient(
        135deg,
        var(--wv-brand) 0%,
        var(--wv-brand-dark) 100%
    ) !important;
}


/* The old process connector contains a hard-coded #10B981
   background-image in an inline style. */
[class~="bg-green/30"][style*="repeating-linear-gradient"] {
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 8px,
        var(--wv-brand) 8px,
        var(--wv-brand) 16px
    ) !important;
}


/* =========================================================
   4. Products / Projects / News filter pills
   Includes "All" and every selected category.
   ========================================================= */

.products-filter-button:hover,
.projects-filter-button:hover,
.news-filter-button:hover {
    background: rgba(var(--wv-brand-rgb), .10) !important;
    border-color: rgba(var(--wv-brand-rgb), .35) !important;
}

.products-filter-button.is-active,
.projects-filter-button.is-active,
.news-filter-button.is-active {
    background: var(--wv-brand) !important;
    border-color: var(--wv-brand) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(var(--wv-brand-rgb), .30) !important;
}


/* =========================================================
   5. Solutions interactive steps
   ========================================================= */

.solutions-step.is-open {
    border-color: var(--wv-brand) !important;
}

.solutions-step.is-open .solutions-step-number {
    background: var(--wv-brand) !important;
    color: #fff !important;
}

.solutions-step-button:hover .solutions-step-number {
    border-color: var(--wv-brand) !important;
}


/* =========================================================
   6. News article links / common accent links
   ========================================================= */

.single-news-content a {
    color: var(--wv-brand) !important;
}


/* =========================================================
   7. Accessibility focus color
   ========================================================= */

:focus-visible {
    outline-color: var(--wv-brand) !important;
}


/* =========================================================
   Home - Our Product Range equal-height cards
   ========================================================= */

#home-product-scroll {
    align-items: stretch;
}

#home-product-scroll > article {
    display: flex;
    flex-direction: column;
}

#home-product-scroll > article > a {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

#home-product-scroll > article > a > div {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

#home-product-scroll > article > a > div > div:last-child {
    flex: 1 1 auto;
}