/*
Theme Name: Bricks Garage
Theme URI: https://bricksgarage.com
Description: Child theme di Storefront per Bricks Garage — stile officina/automotive scuro, accenti giallo e rosso, tipografia industriale. Solo restyle CSS + piccoli hook, nessun override dei template di carrello/checkout per restare compatibile con gli aggiornamenti di WooCommerce.
Author: Bricks Garage
Template: storefront
Version: 1.0.0
Requires PHP: 7.4
Text Domain: bricks-garage
*/

/* =====================================================================
   PALETTE E VARIABILI — "Officina scura"
   ===================================================================== */
:root {
  --bg-0: #0a2136;   /* fondo pagina — allineato al blu del blueprint */
  --bg-1: #0e2a45;   /* superfici: header, card, footer — allineato al blu del blueprint */
  --bg-2: #14375a;   /* superfici sollevate / hover — allineato al blu del blueprint */
  --line: #24547f;   /* bordi sottili — allineato al blu del blueprint */
  --text: #dbe9f7;   /* testo principale — allineato al blu del blueprint */
  --muted: #7fa6cc;  /* testo secondario — allineato al blu del blueprint */
  --yellow: #ffd21e; /* accento primario (giallo officina) */
  --yellow-d: #e6bd00;
  --red: #e2231a;    /* accento secondario (rosso) */
  --red-d: #b81a13;
  --ok: #34c759;

  --radius: 6px;
  --shadow: 0 6px 20px rgba(0,0,0,.45);
  --font-head: "Oswald", "Arial Narrow", Impact, system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =====================================================================
   BASE
   ===================================================================== */
body,
body.woocommerce,
.site {
  background-color: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
}

body {
  /* Texture "diamond plate" sottile da officina, resa in CSS (nessuna immagine esterna) */
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.015) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,255,255,.015) 25%, transparent 25%);
  background-size: 8px 8px;
}

/*
 * !important sul colore: Storefront assegna colori scuri fissi a molti
 * titoli con selettori più specifici della semplice regola per elemento
 * (es. .product_title.entry-title, gli h2/h3 dentro .woocommerce-Tabs-panel)
 * — senza !important quei titoli restano illeggibili sullo sfondo blu scuro
 * del tema. Segnalato dal cliente: titolo prodotto e sottotitoli descrizione
 * quasi invisibili.
 */
h1, h2, h3, h4, h5, h6,
.storefront-product-section h2,
.site-header .site-title {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff !important;
}

a { color: var(--yellow); }
a:hover { color: var(--yellow-d); }

p, li, td, .price del { color: var(--text); }
.entry-content, .site-main { color: var(--text); }

hr, .widget-area .widget { border-color: var(--line); }

/* =====================================================================
   HEADER + NAV
   ===================================================================== */
.site-header {
  background-color: var(--bg-1);
  border-bottom: 3px solid var(--yellow);
  box-shadow: var(--shadow);
}

.site-header .site-title a,
.site-branding .site-title a { color: #fff; }

/* Logo a sinistra, nome del sito a destra, allineati sulla stessa riga. */
.site-branding {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.site-branding .custom-logo-link img {
  max-height: 60px;
  width: auto;
}
.bricks-garage-site-title-inline {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: 1.4rem;
}
.bricks-garage-site-title-inline a {
  color: #fff;
}

/* Striscia "hazard" gialla/nera sotto l'header, tocco da officina */
.site-header::after {
  content: "";
  display: block;
  height: 6px;
  background: repeating-linear-gradient(
    -45deg, var(--yellow) 0 14px, #14161a 14px 28px
  );
  opacity: .9;
}

.main-navigation,
.secondary-navigation {
  background-color: var(--bg-1);
}
.main-navigation ul li a {
  color: var(--text);
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
  color: var(--yellow);
}
.main-navigation ul.menu > li.menu-item-has-children:after,
.main-navigation ul.nav-menu ul.children { background-color: var(--bg-2); }

/* Icona carrello / conteggio */
.site-header-cart .cart-contents,
.site-header-cart .widget_shopping_cart { color: var(--text); }
.site-header-cart .count { background-color: var(--red); color: #fff; }

/* =====================================================================
   BOTTONI
   ===================================================================== */
button,
.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: var(--yellow);
  color: #14161a !important;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  transition: transform .05s ease, background-color .15s ease;
}
button:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--yellow-d);
  color: #14161a !important;
  transform: translateY(-1px);
}

/*
 * Il toggle del menu mobile (button.menu-toggle, la scritta "Menu" in alto
 * a destra) è anche lui un <button>: la regola sopra lo intercetta e gli
 * forza il testo scuro (#14161a) pensato per i bottoni con sfondo giallo.
 * Ma Storefront gli dà sfondo blu scuro (dal color scheme del Customizer,
 * uguale al nostro --bg-1) col testo giallo per contrasto — la nostra
 * regola più generica, con !important, vinceva comunque e rendeva "Menu"
 * nero su blu scuro, illeggibile. Segnalato da Firas.
 */
button.menu-toggle,
button.menu-toggle:hover {
  background-color: var(--bg-1) !important;
  color: var(--yellow) !important;
}

/*
 * Stesso meccanismo di sopra sul bottone "Checkout" del mini-carrello
 * (icona carrello nell'header, menu a tendina .widget_shopping_cart) e sul
 * link "Aggiunto al carrello": il color scheme del Customizer gli dà sfondo
 * grigio scuro (#333) con testo bianco per contrasto, ma la nostra regola
 * generica sui bottoni forzava comunque il testo quasi nero (#14161a),
 * illeggibile su quello sfondo scuro. Trovato con audit di contrasto
 * automatico su tutte le pagine, 19/9/2026.
 */
.widget a.button.checkout,
.added_to_cart {
  color: #fff !important;
}

/*
 * Pulsante "Submit" del form WPForms (pagina Contact me): WPForms lo
 * configura con sfondo blu e testo bianco (variabili CSS proprie
 * --wpforms-button-background-color/--wpforms-button-text-color), ma la
 * nostra regola generica sui bottoni forzava comunque il testo scuro,
 * quasi illeggibile sul blu. Trovato con audit di contrasto automatico
 * su tutte le pagine, 19/9/2026.
 */
.wpforms-submit {
  color: #fff !important;
}

/* Bottone principale (Aggiungi al carrello / Procedi) in evidenza */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.single_add_to_cart_button,
.checkout-button {
  background-color: var(--red) !important;
  color: #fff !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
  background-color: var(--red-d) !important;
  color: #fff !important;
}

/* =====================================================================
   GRIGLIA PRODOTTI / SHOP
   ===================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background-color: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--yellow);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: #fff;
  font-family: var(--font-head);
  text-transform: uppercase;
  font-size: 1rem;
}
.woocommerce ul.products li.product img { border-radius: 4px; }

/* Prezzi */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--yellow);
  font-family: var(--font-head);
  font-weight: 600;
}
.price del { color: var(--muted); opacity: .8; }
.price ins { color: var(--yellow); text-decoration: none; }

/* Badge "Offerta" */
.woocommerce span.onsale {
  background-color: var(--red);
  color: #fff;
  font-family: var(--font-head);
  text-transform: uppercase;
  border-radius: 4px;
  min-height: auto;
  min-width: auto;
  padding: 4px 10px;
  line-height: 1.4;
}

/* Rating a stelle */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--yellow); }

/*
 * Paginazione griglia prodotti (Shop, "1 2 3 4"): Storefront dà alla
 * pagina corrente uno sfondo grigio chiaro fisso con testo grigio poco
 * più chiaro ancora — leggibile su un tema chiaro, illeggibile qui.
 * Trovato con audit di contrasto automatico su tutte le pagine, 19/9/2026.
 */
.woocommerce nav.woocommerce-pagination .page-numbers.current {
  background-color: var(--yellow) !important;
  color: #14161a !important;
}

/*
 * Tooltip prodotto precedente/successivo (le miniature che sbucano ai
 * bordi della pagina prodotto, .storefront-product-pagination): il testo
 * (titolo, prezzo) appare su una card bianca fissa di Storefront, con
 * colore grigio chiaro pensato per un tema chiaro di default — su
 * qualunque tema restava comunque scarsamente leggibile. Non è var(--text)
 * qui perché lo sfondo di questa card è bianco, non blu scuro.
 */
.storefront-product-pagination__title,
.storefront-product-pagination strong,
.storefront-product-pagination .woocommerce-Price-amount,
.storefront-product-pagination .woocommerce-Price-currencySymbol {
  color: #333 !important;
}

/* =====================================================================
   PAGINA PRODOTTO SINGOLO
   ===================================================================== */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background-color: var(--bg-1);
  border-color: var(--line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background-color: var(--bg-2);
  border-bottom-color: var(--bg-2);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--text); }
.woocommerce-tabs .panel { background-color: var(--bg-1); padding: 20px; border-radius: var(--radius); }
.quantity .qty {
  background-color: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* =====================================================================
   FORM (input, checkout, ricerca)
   ===================================================================== */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"],
textarea, select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single {
  background-color: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
}
/*
 * Select2 assegna un colore grigio scuro fisso (#444) direttamente allo
 * span interno ".select2-selection__rendered" (dove appare il valore
 * scelto, es. "Italy" nel campo Paese): la regola sopra sul contenitore
 * ".select2-selection--single" non basta, perché l'ereditarietà del
 * colore viene comunque sovrascritta da questa regola più specifica sul
 * figlio. Il valore selezionato restava quasi invisibile anche a riposo
 * (non solo nel popup delle opzioni). Trovato con audit di contrasto
 * automatico su tutte le pagine, 19/9/2026.
 */
.select2-selection__rendered {
  color: var(--text) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus, select:focus {
  background-color: var(--bg-2) !important;
  color: var(--text) !important;
  border-color: var(--yellow);
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,210,30,.25);
}

/*
 * Pagina "Contact me" (form WPForms): il plugin assegna ai label e
 * sublabel un colore quasi nero fisso (rgba(0,0,0,.85) / rgba(0,0,0,.55)),
 * pensato per un form su sfondo chiaro — sullo sfondo blu scuro del tema
 * risultava illeggibile. Segnalato da Firas.
 */
.wpforms-field-label,
.wpforms-field-label-inline {
  color: var(--text) !important;
}
.wpforms-field-sublabel,
.wpforms-field-description {
  color: var(--muted) !important;
}

/*
 * Storefront assegna sfondo chiaro fisso (#ededed) a ".input-text:focus"
 * (selettore con specificità più alta della nostra regola generica sopra,
 * che non gestiva lo stato :focus) — sul campo coupon del carrello, che
 * NON è dentro un .form-row come i campi del checkout, questa regola di
 * Storefront vinceva e schiariva lo sfondo appena il campo riceveva il
 * focus, anche se a riposo era scuro e leggibile. Segnalato da Firas: il
 * box del coupon "diventa bianco" solo quando ci si clicca dentro.
 */
.input-text:focus {
  background-color: var(--bg-2) !important;
  color: var(--text) !important;
}

/*
 * Popup delle opzioni Select2 (es. campo Paese nel checkout): Select2 lo
 * aggiunge fuori dal form, direttamente dentro <body>, con sfondo bianco
 * fisso — la regola sopra su ".select2-selection--single" colora solo la
 * casella chiusa, non il popup con l'elenco. Il popup ereditava quindi il
 * colore chiaro var(--text)/var(--muted) del tema su sfondo bianco,
 * illeggibile (segnalato da Firas: voci del paese quasi invisibili).
 */
.select2-dropdown {
  background-color: #fff;
  border-color: var(--line);
}
.select2-search--dropdown .select2-search__field {
  background-color: #fff;
  color: #1a1a1a;
  border-color: var(--line);
}
.select2-results__option {
  color: #1a1a1a;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--yellow);
  color: #1a1a1a;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--bg-2);
  color: #fff;
}

/* Messaggi WooCommerce */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background-color: var(--bg-1);
  color: var(--text);
  border-top-color: var(--yellow);
}
.woocommerce-error { border-top-color: var(--red); }

/* Tabelle carrello / ordine */
.woocommerce table.shop_table {
  background-color: var(--bg-1);
  border-color: var(--line);
}
.woocommerce table.shop_table th {
  background-color: var(--bg-1) !important;
  color: #fff;
  font-family: var(--font-head);
}
.woocommerce table.shop_table td { border-top-color: var(--line); }

/*
 * Vista mobile "a schede" del carrello (table.shop_table_responsive):
 * WooCommerce imposta di default uno sfondo chiaro su righe/celle a quella
 * larghezza, con specificità maggiore della regola sopra — senza override
 * qui il testo chiaro del tema ci finisce sopra illeggibile (segnalato dal
 * cliente: "coupon applicato" quasi invisibile su schermo stretto/tablet).
 */
.woocommerce table.shop_table_responsive tr,
.woocommerce table.shop_table_responsive tbody tr td,
.woocommerce table.shop_table_responsive tfoot tr th,
.woocommerce table.shop_table_responsive tfoot tr td {
  background-color: var(--bg-1) !important;
  color: var(--text) !important;
}
.woocommerce table.shop_table_responsive tbody tr td::before {
  color: var(--muted) !important;
}
.woocommerce-remove-coupon,
.woocommerce table.shop_table_responsive a {
  color: var(--yellow) !important;
}

/*
 * Riepilogo ordine nel checkout (woocommerce-checkout-review-order-table):
 * a differenza della tabella del carrello, WooCommerce NON aggiunge la classe
 * "shop_table_responsive" a questa tabella — le regole sopra non la toccano,
 * quindi restava con lo sfondo bianco di default di Storefront e il testo
 * chiaro del tema sopra, illeggibile. Stesso problema per il box del metodo
 * di pagamento (PayPal) e il testo privacy sotto. Segnalato da Firas
 * (contrasto ancora rotto nel checkout dopo il fix del carrello).
 */
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table tbody tr td,
.woocommerce-checkout-review-order-table tfoot tr th,
.woocommerce-checkout-review-order-table tfoot tr td {
  background-color: var(--bg-1) !important;
  color: var(--text) !important;
}
.woocommerce-checkout-review-order-table a {
  color: var(--yellow) !important;
}

#payment,
.woocommerce-checkout-payment,
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment div.payment_box {
  background-color: var(--bg-1) !important;
  color: var(--text) !important;
}
.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--bg-1) !important;
}

.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper {
  color: var(--text) !important;
}

/*
 * Seconda passata sullo stesso bug (verificato via getComputedStyle sul
 * sito live dopo il primo fix, 19/9/2026): il fix sopra copriva la <ul>
 * e il div.payment_box, ma non il singolo <li> di ogni metodo di
 * pagamento (Storefront gli assegna #f5f5f5 con selettore
 * "#payment .payment_methods > li", più specifico) — restava quindi una
 * riga grigio chiaro dietro il logo PayPal. Anche #order_review (il
 * contenitore che avvolge tabella + pagamento) ha sfondo bianco fisso di
 * Storefront, visibile come striscia bianca tra il totale e il metodo di
 * pagamento, non coperta dai fix mirati sui singoli elementi dentro di
 * esso.
 */
#order_review {
  background-color: var(--bg-1) !important;
}
.woocommerce-checkout #payment .payment_methods > li,
.woocommerce-checkout #payment .payment_methods > li:not(.woocommerce-notice) {
  background-color: var(--bg-1) !important;
  color: var(--text) !important;
}

/*
 * Terza passata (stesso giro di verifica, 19/9/2026): il box con testo
 * privacy/termini e il bottone "Place order" (div.form-row.place-order,
 * l'elemento diretto attorno al testo "Your personal data...") ha anche
 * lui uno sfondo chiaro fisso di Storefront (#fafafa), non coperto dai
 * fix precedenti su #payment/.payment_box — era esattamente il box bianco
 * nello screenshot di Firas.
 */
.woocommerce-checkout #payment div.form-row.place-order {
  background-color: var(--bg-1) !important;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
  background-color: var(--bg-1);
  color: var(--muted);
  border-top: 3px solid var(--yellow);
}
.site-footer a { color: var(--text); }
.site-footer a:hover { color: var(--yellow); }
.site-info { background-color: var(--bg-0); color: var(--muted); }

/* =====================================================================
   WIDGET / SIDEBAR
   ===================================================================== */
.widget-area .widget,
.widget { color: var(--text); }
.widget-area .widget h2.widget-title,
.widget h1, .widget h2, .widget h3 { color: #fff; }
.widget ul li a { color: var(--text); }
.widget ul li a:hover { color: var(--yellow); }

/* =====================================================================
   RESPONSIVE — piccoli ritocchi
   ===================================================================== */
@media (max-width: 768px) {
  .site-header::after { height: 4px; }
  .woocommerce ul.products li.product { padding: 10px; }
}