/*
Theme Name: Astra Child – Elettroprof
Theme URI: https://elettroprof.it
Description: Child theme di Astra per Elettroprof – Ricambi Elettrodomestici
Author: Elettroprof
Author URI: https://elettroprof.it
Template: astra
Version: 1.0.1
Text Domain: astra-child
*/

/* =====================================================
   ELETTROPROF Design System – ETAPA 2
   Palette: Blu #1A3A6C | Arancione #F47C20 | Ciano #00A3E0
   Font: Inter (system-ui fallback)
   ===================================================== */

/* === CSS Custom Properties (Design Tokens) === */
:root {
  /* Brand colors */
  --ep-primary:      #1A3A6C;
  --ep-secondary:    #F47C20;
  --ep-accent:       #00A3E0;
  --ep-dark:         #0D1F3C;

  /* Semantic colors */
  --ep-success:      #28A745;
  --ep-warning:      #FFC107;
  --ep-error:        #DC3545;
  --ep-info:         #17A2B8;

  /* Neutral palette */
  --ep-text:         #1C1C1E;
  --ep-text-light:   #6E7680;
  --ep-bg:           #FAFAFA;
  --ep-bg-section:   #F0F2F5;
  --ep-border:       #E1E4E8;
  --ep-white:        #ffffff;

  /* Spacing (8px grid) */
  --ep-xs:   4px;
  --ep-sm:   8px;
  --ep-md:   16px;
  --ep-lg:   24px;
  --ep-xl:   32px;
  --ep-2xl:  48px;
  --ep-3xl:  64px;

  /* Borders & shadows */
  --ep-radius:        8px;
  --ep-radius-sm:     4px;
  --ep-radius-btn:    6px;
  --ep-radius-modal:  12px;
  --ep-shadow:        0 1px 3px rgba(0,0,0,0.08);
  --ep-shadow-hover:  0 4px 16px rgba(0,0,0,0.14);
  --ep-shadow-modal:  0 8px 32px rgba(0,0,0,0.20);
  --ep-shadow-sticky: 0 2px 8px rgba(0,0,0,0.12);
}

/* === Typography === */
body {
  color: var(--ep-text);
  background-color: var(--ep-bg);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ep-primary);
  font-weight: 700;
}

a {
  color: var(--ep-accent);
  transition: color 0.2s;
}

a:hover {
  color: var(--ep-secondary);
}

/* === Accessibility === */
:focus-visible {
  outline: 2px solid var(--ep-secondary);
  outline-offset: 2px;
}

/* Skip to content */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
}

/* === Header === */
.site-header {
  background-color: var(--ep-white);
  box-shadow: var(--ep-shadow-sticky);
}

.main-header-bar {
  background-color: var(--ep-primary);
}

/* Site title / logo area */
.site-title a,
.site-title a:hover {
  color: var(--ep-white);
}

/* === Navigation === */
.main-navigation a {
  color: var(--ep-white);
  font-weight: 500;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--ep-secondary);
}

/* Astra primary nav */
.ast-primary-header-bar .main-header-bar-navigation .menu-item a {
  color: var(--ep-white);
}

/* === WooCommerce – Buttons === */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
a.wc-block-components-button,
.wp-block-button__link {
  background-color: var(--ep-secondary) !important;
  color: var(--ep-white) !important;
  border: none;
  border-radius: var(--ep-radius-btn);
  font-weight: 600;
  padding: 12px 20px;
  transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
  cursor: pointer;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover {
  background-color: #d46a18 !important;
  color: var(--ep-white) !important;
  transform: translateY(-1px);
  box-shadow: var(--ep-shadow-hover);
}

/* "Aggiungi al carrello" micro-feedback */
.woocommerce a.button.ajax_add_to_cart:active,
.woocommerce button.button:active {
  transform: scale(0.97);
}

/* === WooCommerce – Product Cards === */
ul.products li.product {
  border: 1px solid var(--ep-border) !important;
  border-radius: var(--ep-radius) !important;
  box-shadow: var(--ep-shadow) !important;
  background: var(--ep-white) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
  padding: var(--ep-md) !important;
}

ul.products li.product:hover {
  box-shadow: var(--ep-shadow-hover) !important;
  transform: translateY(-2px);
}

/* Product image zoom on hover */
ul.products li.product .woocommerce-loop-product__link img {
  transition: transform 0.3s ease;
}

ul.products li.product:hover .woocommerce-loop-product__link img {
  transform: scale(1.04);
}

/* Product title */
ul.products li.product .woocommerce-loop-product__title {
  color: var(--ep-text);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--ep-sm);
}

/* Product price */
.woocommerce .price,
ul.products li.product .price {
  color: var(--ep-primary) !important;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Sale price */
.woocommerce .price ins {
  color: var(--ep-secondary) !important;
  font-weight: 700;
  text-decoration: none;
}

.woocommerce .price del {
  color: var(--ep-text-light) !important;
  opacity: 0.7;
}

/* === WooCommerce – Badges === */
.woocommerce span.onsale {
  background: var(--ep-secondary) !important;
  color: var(--ep-white) !important;
  border-radius: var(--ep-radius-sm) !important;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 4px 8px;
  min-width: auto;
  min-height: auto;
  line-height: 1.2;
}

/* === WooCommerce – SKU (Codice prodotto) === */
.woocommerce .sku,
.product_meta .sku {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.875rem;
  color: var(--ep-text-light);
  background: var(--ep-bg-section);
  padding: 2px 6px;
  border-radius: var(--ep-radius-sm);
  display: inline-block;
}

/* === WooCommerce – Product Page === */
.woocommerce div.product .product_title {
  color: var(--ep-primary);
  font-size: 1.75rem;
  font-weight: 700;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--ep-text);
  line-height: 1.6;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--ep-primary);
  border-bottom-color: var(--ep-secondary);
}

/* === WooCommerce – Cart & Checkout === */
.woocommerce-cart-form th,
.woocommerce-checkout th {
  background-color: var(--ep-bg-section);
  color: var(--ep-primary);
  font-weight: 600;
}

/* Order total */
.woocommerce .order-total .amount {
  color: var(--ep-secondary) !important;
  font-size: 1.25rem;
  font-weight: 700;
}

/* Checkout input focus */
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--ep-accent) !important;
  box-shadow: 0 0 0 2px rgba(0,163,224,0.2) !important;
  outline: none;
}

/* === WooCommerce – Stock status === */
.woocommerce .in-stock {
  color: var(--ep-success);
  font-weight: 600;
}

.woocommerce .out-of-stock {
  color: var(--ep-error);
  font-weight: 600;
}

/* === Footer === */
.site-footer,
.ast-small-footer {
  background-color: var(--ep-dark);
  color: rgba(255,255,255,0.8);
}

.site-footer a,
.ast-small-footer a {
  color: rgba(255,255,255,0.7);
}

.site-footer a:hover,
.ast-small-footer a:hover {
  color: var(--ep-secondary);
}

.ast-small-footer-wrap {
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* === Page Background === */
.woocommerce-shop .site-content,
.woocommerce-page .site-content {
  background-color: var(--ep-bg);
}

/* === Breadcrumb === */
.woocommerce .woocommerce-breadcrumb {
  color: var(--ep-text-light);
  font-size: 0.875rem;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--ep-accent);
}

/* === Widgets sidebar === */
.widget-title {
  color: var(--ep-primary);
  font-weight: 700;
  border-bottom: 2px solid var(--ep-secondary);
  padding-bottom: var(--ep-sm);
  margin-bottom: var(--ep-md);
}

/* === Responsive – Mobile === */
@media (max-width: 767px) {
  ul.products li.product {
    padding: var(--ep-sm) !important;
  }

  .woocommerce div.product .product_title {
    font-size: 1.4rem;
  }

  .woocommerce a.button,
  .woocommerce button.button {
    padding: 10px 16px;
    font-size: 0.95rem;
  }
}

/* === Utility classes === */
.ep-text-primary { color: var(--ep-primary); }
.ep-text-accent   { color: var(--ep-accent); }
.ep-text-cta      { color: var(--ep-secondary); }
.ep-bg-section    { background-color: var(--ep-bg-section); }
.ep-border        { border: 1px solid var(--ep-border); }