/*
Theme Name:  Astra Child. Child for Astra
Theme URI:  https://kernterm.it
Description:  Theme to support tutsplus tutorial. Child theme for the Astra.
Author:  Batman
Textdomain:  batman
Author URI:  https://kernterm.it
Template:  astra
Version:  1.0
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* =========================================================
   KERNTERM CHILD THEME — Custom CSS
   Colore accento: #E8801A (ambra)
   ========================================================= */

/* ----------------------------------------------------------
   VARIABILI
   ---------------------------------------------------------- */
:root {
    --kern-amber:       #E8801A;
    --kern-amber-dark:  #c96d10;
    --kern-amber-light: #f5a44e;
    --kern-dark:        #1d1d1d;
    --kern-header-bg:   #3a3a3a;
    --kern-text:        #333333;
    --kern-radius:      4px;
    --kern-transition:  0.2s ease;
}

/* ----------------------------------------------------------
   BOTTONI PRIMARI — colore ambra uniforme su tutto il sito
   ---------------------------------------------------------- */

/* WPC Filter Everything: bottone "Cerca" */
.wpc-filters-submit-button,
.wpc-filters-submit-button:visited {
    background-color: var(--kern-amber) !important;
    border-color:     var(--kern-amber) !important;
    color:            #ffffff !important;
    border-radius:    var(--kern-radius) !important;
    font-weight:      600 !important;
    transition:       background-color var(--kern-transition), border-color var(--kern-transition) !important;
}
.wpc-filters-submit-button:hover,
.wpc-filters-submit-button:focus {
    background-color: var(--kern-amber-dark) !important;
    border-color:     var(--kern-amber-dark) !important;
    color:            #ffffff !important;
}

/* WPC Filter Everything: bottone "Mostra" (popup mobile) */
.wpc-filters-apply-button,
.wpc-filters-apply-button:visited {
    background-color: var(--kern-amber) !important;
    border-color:     var(--kern-amber) !important;
    color:            #ffffff !important;
    border-radius:    var(--kern-radius) !important;
    font-weight:      600 !important;
    transition:       background-color var(--kern-transition), border-color var(--kern-transition) !important;
}
.wpc-filters-apply-button:hover,
.wpc-filters-apply-button:focus {
    background-color: var(--kern-amber-dark) !important;
    border-color:     var(--kern-amber-dark) !important;
    color:            #ffffff !important;
}

/* WPC Filter Everything: bottone "Resetta" — outline ambra */
.wpc-filters-reset-button,
.wpc-filters-reset-button:visited {
    background-color: transparent !important;
    border:           1px solid var(--kern-amber) !important;
    color:            var(--kern-amber) !important;
    border-radius:    var(--kern-radius) !important;
    font-weight:      600 !important;
    transition:       background-color var(--kern-transition), color var(--kern-transition) !important;
}
.wpc-filters-reset-button:hover,
.wpc-filters-reset-button:focus {
    background-color: var(--kern-amber) !important;
    color:            #ffffff !important;
}

/* WPC Filter Everything: bottone "Annulla" — outline neutro */
.wpc-filters-close-button,
.wpc-filters-close-button:visited {
    background-color: transparent !important;
    border:           1px solid #ccc !important;
    color:            #555 !important;
    border-radius:    var(--kern-radius) !important;
    transition:       border-color var(--kern-transition) !important;
}
.wpc-filters-close-button:hover,
.wpc-filters-close-button:focus {
    border-color:     var(--kern-amber) !important;
    color:            var(--kern-amber) !important;
}

/* WooCommerce: bottoni generici (Continua gli acquisti, Aggiungi al carrello, ecc.) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.ast-continue-shopping,
.wc-proceed-to-checkout .checkout-button {
    background-color: var(--kern-amber) !important;
    color:            #ffffff !important;
    border-color:     var(--kern-amber) !important;
    border-radius:    var(--kern-radius) !important;
    transition:       background-color var(--kern-transition) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.ast-continue-shopping:hover,
.wc-proceed-to-checkout .checkout-button:hover {
    background-color: var(--kern-amber-dark) !important;
    border-color:     var(--kern-amber-dark) !important;
    color:            #ffffff !important;
}

/* ----------------------------------------------------------
   MOBILE MENU — touch target a tutta larghezza per i parent items
   ---------------------------------------------------------- */

/* L'<a> senza href nei parent item deve sembrare cliccabile su tutta la riga */
#ast-hf-mobile-menu .menu-item-has-children > a.menu-link {
    cursor: pointer;
    /* estende l'area del testo verso sinistra per uniformità con il toggle */
    flex: 1;
    user-select: none;
    -webkit-tap-highlight-color: rgba(232, 128, 26, 0.15);
}

/* Feedback visivo al tap/hover per l'intera riga del menu mobile */
#ast-hf-mobile-menu .menu-item-has-children > a.menu-link:hover,
#ast-hf-mobile-menu .menu-item-has-children > a.menu-link:active {
    color: var(--kern-amber);
}

/* ----------------------------------------------------------
   BOTTONE HERO "Configura il tuo scarico" — era blu per impostazione
   Elementor, sovrascriviamo con il colore ambra del brand.
   Targettiamo per element-id (de915a9) per non toccare altri bottoni.
   ---------------------------------------------------------- */
.elementor-element-de915a9 .elementor-button,
.elementor-element-de915a9 .elementor-button:visited {
    background-color: var(--kern-amber) !important;
    border-color:     var(--kern-amber) !important;
    color:            #ffffff !important;
}
.elementor-element-de915a9 .elementor-button:hover,
.elementor-element-de915a9 .elementor-button:focus {
    background-color: var(--kern-amber-dark) !important;
    border-color:     var(--kern-amber-dark) !important;
}

/* ----------------------------------------------------------
   HEADER — nasconde il testo site-title nell'header
   (era vuoto prima del fix blogname; ora vale "Kernterm" ma
   il brand è già identificato dal logo, non serve testo duplicato)
   ---------------------------------------------------------- */
.ast-site-title-wrap .site-title a {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}

/* ----------------------------------------------------------
   HEADER — piccoli miglioramenti al nav link hover
   ---------------------------------------------------------- */
.ast-primary-header-bar .menu-link:hover,
.ast-primary-header-bar .menu-link:focus {
    color: var(--kern-amber) !important;
}

/* ----------------------------------------------------------
   LINK GENERICI — accent color ambra
   ---------------------------------------------------------- */
a:not(.button):not(.menu-link):not(.wp-block-button__link) {
    color: var(--kern-amber);
}
a:not(.button):not(.menu-link):not(.wp-block-button__link):hover {
    color: var(--kern-amber-dark);
}

/* ----------------------------------------------------------
   TITOLI ARCHIVIO WOOCOMMERCE — erano in blu (Global Color 1
   di Astra, #048de9), il brief chiede testo scuro/nero per i
   titoli e ambra riservato a bottoni/azioni.
   Riguarda "Prodotti" su /negozio/ e i titoli analoghi di
   carrello/checkout/account (stesso markup .page-title).
   ---------------------------------------------------------- */
.page-title {
    color: var(--kern-dark) !important;
}

/* ----------------------------------------------------------
   SOTTOMENU HEADER — il bordo superiore del dropdown (Sportster/
   Dyna/Softail/Touring) era blu (stesso Global Color 1) mentre
   la voce attiva è già ambra: uniformiamo il bordo all'ambra.
   ---------------------------------------------------------- */
.ast-builder-menu-1 .sub-menu {
    border-top-color: var(--kern-amber) !important;
}

/* ----------------------------------------------------------
   FILTRI NEGOZIO/CONFIGURA — le 4 etichette ("1. Seleziona la
   categoria" ecc.) vanno su due righe tranne "Seleziona il
   colore" che è più corta: la sua tendina risultava più in alto
   delle altre 3. Riserviamo sempre l'altezza di due righe così
   le tendine restano allineate. Solo da tablet in su, dove i 4
   filtri sono affiancati (su mobile sono impilati a piena
   larghezza e non serve).
   ---------------------------------------------------------- */
@media (min-width: 768px) {
    .wpc-filter-title {
        min-height: 3em; /* line-height del titolo è 1.5em → 2 righe esatte, relativo al suo font-size */
        display: block;
    }
}

/* ----------------------------------------------------------
   FILTRI — select2 nasconde la <select> nativa con la classe
   "select2-hidden-accessible" (clip 0x0), ma le regole del
   plugin ".wpc-filter-content select" e ".wpc-filters-widget-
   content select" (width/min-height, entrambe più specifiche)
   vincono sulla regola di occultamento, quindi la select nativa
   resta larga/alta quanto la tendina visibile e riceve i tap:
   su iOS questo apre il picker nativo a schermo intero invece
   della tendina custom di select2. Forziamo qui la stessa
   select a essere davvero invisibile e non cliccabile.
   ---------------------------------------------------------- */
.wpc-filter-content select.select2-hidden-accessible,
.wpc-filters-widget-content select.select2-hidden-accessible {
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* ----------------------------------------------------------
   FRECCIA TENDINA — Astra imposta ".select2-selection__arrow"
   con "top:50%; transform:translateY(-50%)" per centrarla (per
   il caso base, box basso ~28px). Il CSS del plugin filtri
   sovrascrive solo "top" a 1px con un wrapper alto quanto tutta
   la barra ("height:100%"), ma NON tocca "transform": il
   translateY(-50%) di Astra resta attivo e spinge la freccia
   verso l'alto di metà della sua stessa altezza, facendola
   uscire dalla barra. Annulliamo qui il transform lasciato
   dietro, solo per le tendine di questo plugin filtri.
   ---------------------------------------------------------- */
.wpc-filter-layout-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow,
.wpc-sorting-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    transform: none;
}

/* ----------------------------------------------------------
   TENDINA APERTA DIETRO I BOTTONI "Resetta"/"Cerca" — quando il
   popup di select2 si apre verso il basso (viewport alto) finisce
   dietro al box dei bottoni invece che sopra. Causa: la
   "transition" che abbiamo aggiunto su questi bottoni (per il
   fade colore all'hover) fa sì che il browser li promuova a un
   proprio livello di composizione grafica, che finisce per
   ignorare il normale ordine di z-index rispetto al popup di
   select2 (z-index:98) anche quando quest'ultimo viene alzato
   molto di più. Dando ai bottoni un contesto di stacking
   esplicito (position + z-index basso) il browser torna a
   rispettare l'ordine corretto, senza perdere l'animazione
   hover né nascondere i bottoni nello stato normale.
   ---------------------------------------------------------- */
.wpc-filter-layout-submit-button {
    position: relative;
    z-index: 1;
}