/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ==========================================================================
   HT Toimistokalusteet – Yhtenäinen sininen brändivärimaailma
   
   Main brand:  var(--wd-primary-color)  (WoodMart Theme Settings → Colors)
   Sub brand:   #39a4df  (vaalea sininen)
   
   Tämä CSS ylikirjoittaa KAIKKI oranssit, vihreät ja muut WoodMartin
   oletusväreihin jääneet aksenttivärit sinisiksi.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS-muuttujat — globaalit ylikirjoitukset
   -------------------------------------------------------------------------- */
:root {
    /* Toissijainen brändiväri (vaalea sininen) */
    --wd-alternative-color: #39a4df;

    /* HT omat muuttujat (jos käytössä custom CSS:ssä / Elementorissa) */
    --ht-accent: var(--wd-primary-color);
    --ht-accent-hover: color-mix(in srgb, var(--wd-primary-color), #000 15%);
    --ht-accent-light: color-mix(in srgb, var(--wd-primary-color), #fff 85%);
    --ht-accent-text: #ffffff;

    /* Accent-nappien taustavärit → siniset */
    --btn-accented-bgcolor: var(--wd-primary-color);
    --btn-accented-bgcolor-hover: color-mix(in srgb, var(--wd-primary-color), #000 15%);
    --btn-accented-color: #ffffff;
    --btn-accented-color-hover: #ffffff;
}

/* --------------------------------------------------------------------------
   2. WooCommerce napit – "Lisää ostoskoriin", "Siirry kassalle" jne.
   -------------------------------------------------------------------------- */

/* Single product add to cart */
.single_add_to_cart_button,
.single_add_to_cart_button:hover,
.single_add_to_cart_button:focus {
    background-color: var(--wd-primary-color) !important;
    border-color: var(--wd-primary-color) !important;
    color: #ffffff !important;
}
.single_add_to_cart_button:hover {
    background-color: color-mix(in srgb, var(--wd-primary-color), #000 15%) !important;
    border-color: color-mix(in srgb, var(--wd-primary-color), #000 15%) !important;
}

/* Loop (tuotekortti) add to cart */
.add_to_cart_button,
.product_type_simple,
.product_type_variable {
    background-color: var(--wd-primary-color) !important;
    border-color: var(--wd-primary-color) !important;
    color: #ffffff !important;
}

/* Checkout / proceed to checkout */
.checkout-button,
.wc-proceed-to-checkout .checkout-button,
#place_order {
    background-color: var(--wd-primary-color) !important;
    border-color: var(--wd-primary-color) !important;
    color: #ffffff !important;
}
.checkout-button:hover,
.wc-proceed-to-checkout .checkout-button:hover,
#place_order:hover {
    background-color: color-mix(in srgb, var(--wd-primary-color), #000 15%) !important;
    border-color: color-mix(in srgb, var(--wd-primary-color), #000 15%) !important;
}

/* Update cart button */
button[name="update_cart"],
.coupon .button {
    background-color: var(--wd-primary-color) !important;
    border-color: var(--wd-primary-color) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   3. WoodMart accent-napit (yleinen catch-all)
   -------------------------------------------------------------------------- */

/* Kaikki accent-tyyliset napit */
.btn-color-primary,
.btn-color-primary:hover,
.woodmart-button-wrapper .btn-color-primary {
    background-color: var(--wd-primary-color) !important;
    border-color: var(--wd-primary-color) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   4. Sale badge ja hinta-korostukset
   -------------------------------------------------------------------------- */

/* Sale badge */
.onsale,
.product-label.onsale,
.wd-label.onsale {
    background-color: var(--wd-primary-color) !important;
    color: #ffffff !important;
}

/* Price highlight / sale hinta */
.price ins,
.price ins .amount,
.woocommerce-Price-amount {
    color: var(--wd-primary-color);
}

/* --------------------------------------------------------------------------
   5. WoodMart UI-elementit
   -------------------------------------------------------------------------- */

/* Paginaatio aktiivinen sivu (käyttää jo --wd-primary-color) */
/* Navigaatio hover (käyttää jo --wd-primary-color) */

/* Linkkien väri */
a:hover {
    color: var(--wd-primary-color);
}

/* WoodMart secondary-color elementit → vaalea sininen */
.color-scheme-secondary,
.wd-el-btn.color-scheme-secondary {
    background-color: #39a4df !important;
    border-color: #39a4df !important;
    color: #ffffff !important;
}
.color-scheme-secondary:hover,
.wd-el-btn.color-scheme-secondary:hover {
    background-color: #2d8fc4 !important;
    border-color: #2d8fc4 !important;
}

/* --------------------------------------------------------------------------
   6. WoodMart header & minikoriin / wishlist counter
   -------------------------------------------------------------------------- */

/* Tuotemääräpallo (esim. ostoskori-ikoni) */
.wd-tools-count,
.wd-cart-number,
.wishlist-count {
    background-color: var(--wd-primary-color) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   7. Lomake-elementit – fokus & aktiivinen tila
   -------------------------------------------------------------------------- */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--wd-primary-color) !important;
    outline-color: var(--wd-primary-color);
}

/* --------------------------------------------------------------------------
   8. WoodMart widget / suodattimet aktiivinen tila
   -------------------------------------------------------------------------- */
.wd-active > a,
.wd-active > span,
.widget .wd-active {
    color: var(--wd-primary-color) !important;
}

/* Attribute swatchit aktiivinen */
.wd-swatch.wd-active {
    border-color: var(--wd-primary-color) !important;
}

/* --------------------------------------------------------------------------
   9. WoodMart cookie notice / promo bar napit
   -------------------------------------------------------------------------- */
.wd-cookies-popup .btn,
.wd-promo-popup .btn {
    background-color: var(--wd-primary-color) !important;
    border-color: var(--wd-primary-color) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   10. "View cart" & lisätty koriin -napit
   -------------------------------------------------------------------------- */
.added_to_cart,
.added_to_cart:hover {
    background-color: #39a4df !important;
    border-color: #39a4df !important;
    color: #ffffff !important;
}
.added_to_cart:hover {
    background-color: #2d8fc4 !important;
    border-color: #2d8fc4 !important;
}

/* --------------------------------------------------------------------------
   11. Custom HT-accent ylikirjoitus (Elementor custom CSS:stä)
   -------------------------------------------------------------------------- */
[style*="--ht-accent"] {
    --ht-accent: var(--wd-primary-color) !important;
}

/* --------------------------------------------------------------------------
   12. Varmistus: Kaikki mahdolliset oranssit pois
   -------------------------------------------------------------------------- */

/* Jos jossain Elementor-sivussa on hardcoded oranssi nappi */
.elementor-button.elementor-button-warning,
.elementor-button[style*="background-color: #F97316"],
.elementor-button[style*="background-color: #ff6600"],
.elementor-button[style*="background-color: #e67e22"] {
    background-color: var(--wd-primary-color) !important;
    border-color: var(--wd-primary-color) !important;
}


/* Piilota kampanjatuotteiden hinta */
.product_cat-kampanjatuotteet .price { display: none !important; }
.product_cat-kampanjatuotteet .price-wrapper { display: none !important; }
/* ==========================================================






/* Erota tavalliset sivut kategorialinkeista (sininen kiila) */
.wd-sticky-nav .menu-page-separator {
    border-top: 2px solid var(--wd-primary-color, #0f62c6) !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
}


/* ==========================================================
   PALAUTETTU MAIN HEADER TYYLI (Kuten kuvassa)
   ========================================================== */

/* Päävalikon linkkien perustyyli (Valkoinen teksti ja ikoni) */
.whb-header-bottom .wd-nav-main > li > a {
    color: #ffffff !important;
}
.whb-header-bottom .wd-nav-main > li > a .wd-nav-img {
    filter: brightness(0) invert(1) !important; /* Muuttaa SVG:t valkoiseksi */
}

/* Aktiivisen ja hover-linkin tyyli (Valkoinen pilleri, sininen teksti ja ikoni) */
.whb-header-bottom .wd-nav-main > li.current-menu-item > a,
.whb-header-bottom .wd-nav-main > li:hover > a {
    background-color: #ffffff !important;
    border-radius: 50px !important;
    color: var(--wd-primary-color, rgb(21, 78, 134)) !important;
}

.whb-header-bottom .wd-nav-main > li.current-menu-item > a .wd-nav-img,
.whb-header-bottom .wd-nav-main > li:hover > a .wd-nav-img {
    filter: none !important; /* Palauttaa SVG:n alkuperäisen (tai css filterillä muuttaa siniseksi) */
}

/* Koska Woodmartin SVG:t ovat oletuksena usein mustia, värjätään ne aktiivisena siniseksi CSS-filtterillä jos tarpeen. 
   Oletetaan että ne ovat mustia ja muutetaan ne teeman siniseksi: */
.whb-header-bottom .wd-nav-main > li.current-menu-item > a .wd-nav-img,
.whb-header-bottom .wd-nav-main > li:hover > a .wd-nav-img {
    filter: brightness(0) saturate(100%) invert(26%) sepia(82%) saturate(1637%) hue-rotate(190deg) brightness(91%) contrast(93%) !important; 
}

/* "Kaikki Kategoriat" -napin palautus tummansiniseksi (kuvassa se on tummansininen valkoisella tekstillä ja valkoisella ikonilla) */
.whb-header-bottom .wd-header-sticky-nav .wd-tools-inner {
    background-color: rgb(21, 78, 134) !important;
    border-radius: 50px !important;
}
.whb-header-bottom .wd-header-sticky-nav .wd-tools-icon {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
}
.whb-header-bottom .wd-header-sticky-nav .wd-tools-text,
.whb-header-bottom .wd-header-sticky-nav .wd-tools-icon::before {
    color: #ffffff !important;
}



/* ==========================================================
   SIVUPALKIN LINKKIEN TYYLIT (Mustat linkit valkoisella taustalla)
   ========================================================== */
.wd-sticky-nav .wd-nav-vertical > li > a {
    color: #333333 !important; /* Perus musta/tummanharmaa */
}

/* Aktiivinen linkki (esim. kun ollaan kyseisellä sivulla) */
.wd-sticky-nav .wd-nav-vertical > li.current-menu-item > a {
    color: var(--wd-primary-color, rgb(21, 78, 134)) !important;
}

/* Varmistetaan että ikonit eivät ole vahingossakaan valkoisia (esim. periytymisen vuoksi) */
.wd-sticky-nav .wd-nav-vertical > li > a .wd-nav-img {
    filter: none !important;
}