/*
Theme Name: Amaranto - Idexa Web
Theme URI: https://demo-store.idexaweb.com
Description: Child theme di Blocksy per lo store demo Quartiere. Applica l'identità visiva Idexa Web: accento arancio, titoli Raleway, testo Poppins, bottoni ghost in maiuscolo. Font self-hosted, nessuna chiamata a CDN esterne.
Author: Idexa Web
Template: blocksy
Version: 1.0.8
Text Domain: quartiere-idexa
*/

/* ============================================================
   1. Font self-hosted (nessuna richiesta a fonts.gstatic.com)
   ============================================================ */

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('fonts/raleway-var.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   2. Token di brand Idexa Web
   ============================================================ */

/*
 * I colori NON si impostano qui: la palette Idexa e' scritta nel theme_mod
 * "colorPalette" di Blocksy (color1 = #FB6500), quindi il tema stesso emette
 * i --theme-palette-color-* corretti. Duplicarli qui sarebbe ridondante.
 *
 * I font invece richiedono !important: Blocksy stampa un <style
 * id="ct-main-styles-inline-css"> DOPO il foglio di stile del child, quindi a
 * parità di specificità vincerebbe lui. Verificato nel <head> della pagina.
 */
:root {
  /* Token di brand, per uso interno a questo foglio */
  --idx-orange:        #FB6500;
  --idx-orange-dark:   #C94F00;
  --idx-orange-soft:   rgba(251, 101, 0, 0.08);
  --idx-ink:           #14181A;
  --idx-body:          #54595F;
  --idx-border:        #E4E6E7;
  --idx-surface:       #F7F7F6;
  --idx-white:         #FFFFFF;

  --idx-heading-font: 'Raleway', 'Poppins', system-ui, sans-serif;
  --idx-body-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --theme-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  --theme-button-border-radius: 0px !important;
  --theme-button-text-transform: uppercase !important;
}

/* ============================================================
   3. Tipografia: titoli Raleway 800 maiuscolo, corpo Poppins
   ============================================================ */

body,
.entry-content,
input, textarea, select, button {
  font-family: var(--idx-body-font) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.widget-title,
.product_title,
.woocommerce-loop-product__title,
.woocommerce-products-header__title {
  font-family: var(--idx-heading-font) !important;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* L'hero e i titoli di sezione ricalcano il tono di idexaweb.com */
h1, h2,
.page-title,
.woocommerce-products-header__title {
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

/* Titolo prodotto in griglia: leggibile, non urlato */
.woocommerce-loop-product__title,
.wc-block-grid__product-title {
  text-transform: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.35;
}

/* ============================================================
   4. Bottoni: ghost con bordo sottile, come il CTA "PARLIAMONE"
   ============================================================ */

.ct-button,
.button,
button,
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: var(--theme-font-family);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  border-radius: 0;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

/* Azione primaria: arancio pieno */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.single_add_to_cart_button,
.checkout-button,
.wc-block-cart__submit-button {
  background-color: var(--idx-orange);
  border: 1px solid var(--idx-orange);
  color: var(--idx-white);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
  background-color: var(--idx-orange-dark);
  border-color: var(--idx-orange-dark);
  color: var(--idx-white);
}

/* Azione secondaria: ghost, si riempie all'hover */
.woocommerce a.button:not(.alt),
.woocommerce button.button:not(.alt) {
  background-color: transparent;
  border: 1px solid var(--idx-ink);
  color: var(--idx-ink);
}

.woocommerce a.button:not(.alt):hover,
.woocommerce button.button:not(.alt):hover {
  background-color: var(--idx-ink);
  color: var(--idx-white);
}

/* ============================================================
   5. Dettagli ecommerce
   ============================================================ */

/* Prezzo: peso e colore da scheda prodotto, non da nota a margine */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
  color: var(--idx-ink);
  font-weight: 600;
}

.woocommerce div.product p.price {
  font-size: 1.6rem;
  font-family: var(--idx-heading-font);
  font-weight: 800;
}

/* Prezzo barrato in saldo */
.woocommerce .price del {
  color: var(--idx-body);
  opacity: 0.6;
  font-weight: 400;
}

.woocommerce .price ins {
  color: var(--idx-orange);
  text-decoration: none;
}

/* Badge saldo: arancio Idexa, squadrato */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  background-color: var(--idx-orange);
  color: var(--idx-white);
  border-radius: 0;
  font-family: var(--theme-font-family);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  min-height: 0;
  min-width: 0;
  padding: 0.35em 0.7em;
  line-height: 1.4;
}

/* Selettori variante.
 * Blocksy impone height:40px ai select: con il padding il contenuto arrivava a
 * 48.8px e il testo veniva tagliato in basso. Qui l'altezza torna automatica con
 * un minimo comodo al tocco, e le regole usano !important perche' lo stile inline
 * del tema viene stampato dopo questo foglio. */
.woocommerce div.product form.cart .variations select {
  height: auto !important;
  min-height: 50px;
  box-sizing: border-box;
  padding: 0.8em 2.6em 0.8em 0.95em !important;
  line-height: 1.25 !important;
  border: 1px solid var(--idx-border) !important;
  border-radius: 0 !important;
  background-color: var(--idx-white);
  font-family: var(--idx-body-font) !important;
  font-size: 0.95rem;
  color: var(--idx-ink);
  width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.woocommerce div.product form.cart .variations select:hover {
  border-color: var(--idx-body) !important;
}

.woocommerce div.product form.cart .variations select:focus,
.woocommerce div.product form.cart .variations select:focus-visible {
  border-color: var(--idx-orange) !important;
  box-shadow: 0 0 0 3px var(--idx-orange-soft);
  outline: none;
}

/* Etichette taglia e colore: stesso registro dei bottoni */
.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations th.label label {
  font-family: var(--idx-body-font) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  font-size: 0.72rem !important;
  color: var(--idx-body) !important;
  padding-bottom: 0.45rem;
}

/* Righe della tabella varianti: respiro verticale coerente */
.woocommerce div.product form.cart .variations tr {
  display: block;
  margin-bottom: 1.15rem;
}

.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations td.value {
  display: block;
  width: 100%;
  text-align: left;
}

/* "Svuota": azione secondaria, non un bottone */
.woocommerce div.product form.cart .reset_variations {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--idx-body-font);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--idx-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.woocommerce div.product form.cart .reset_variations:hover {
  color: var(--idx-orange);
}

/* Stato "scegli prima una variante": deve leggersi come non ancora disponibile,
 * non come un bottone rotto. Grigio pieno invece di arancio slavato. */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed {
  background-color: var(--idx-surface) !important;
  border-color: var(--idx-border) !important;
  color: var(--idx-body) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* Prezzo e disponibilita' della variante scelta */
.woocommerce div.product form.cart .woocommerce-variation-price .price {
  font-family: var(--idx-heading-font);
  font-weight: 800;
  color: var(--idx-ink);
}

.woocommerce div.product form.cart .woocommerce-variation-availability .stock.in-stock {
  font-family: var(--idx-body-font);
  font-size: 0.85rem;
  color: #2e7d32;
}

.woocommerce div.product form.cart .woocommerce-variation-availability .stock.out-of-stock {
  font-family: var(--idx-body-font);
  font-size: 0.85rem;
  color: #b3261e;
}

/* Notice Woo in tinta col brand */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--idx-orange);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--idx-orange);
}

/* Accessibilita: focus visibile su tutti gli interattivi */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.ct-button:focus-visible {
  outline: 2px solid var(--idx-orange);
  outline-offset: 2px;
}

/* ============================================================
   6. Homepage: hero e sezioni, tono di idexaweb.com
   ============================================================ */

.idx-hero {
  background: var(--idx-ink);
  color: var(--idx-white);
  margin: 0 0 3.5rem;
  padding: clamp(3.5rem, 9vw, 7rem) 1.5rem;
  text-align: center;
}

.idx-hero__inner {
  max-width: 60rem;
  margin: 0 auto;
}

.idx-hero__eyebrow {
  font-family: var(--idx-body-font);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--idx-orange);
  margin: 0 0 1.1rem;
}

.idx-hero__title {
  font-family: var(--idx-heading-font) !important;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 6.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--idx-white);
  margin: 0 0 1.4rem;
}

.idx-hero__title .idx-accent { color: var(--idx-orange); }

.idx-hero__sub {
  font-family: var(--idx-body-font);
  font-size: clamp(0.98rem, 1.6vw, 1.12rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 38rem;
  margin: 0 auto 2.2rem;
}

/* CTA ghost, come "PARLIAMONE" su idexaweb.com */
.idx-hero__cta {
  display: inline-block;
  font-family: var(--idx-body-font);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--idx-white);
  border: 1px solid rgba(255, 255, 255, 0.55);
  padding: 1.05em 2.6em;
  text-decoration: none;
  transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.idx-hero__cta:hover,
.idx-hero__cta:focus {
  background: var(--idx-orange);
  border-color: var(--idx-orange);
  color: var(--idx-white);
}

/* Striscia di rassicurazioni */
.idx-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--idx-border);
  border-top: 1px solid var(--idx-border);
  border-bottom: 1px solid var(--idx-border);
  margin: 0 0 3.5rem;
}

.idx-strip__item {
  background: var(--idx-white);
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.idx-strip__item strong {
  display: block;
  font-family: var(--idx-body-font);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--idx-ink);
  margin-bottom: 0.35rem;
}

.idx-strip__item span {
  font-family: var(--idx-body-font);
  font-size: 0.84rem;
  color: var(--idx-body);
}

/* Titolo di sezione con filetto arancio */
.idx-section-title {
  font-family: var(--idx-heading-font) !important;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -0.01em;
  color: var(--idx-ink);
  margin: 0 0 1.8rem;
  padding-bottom: 0.7rem;
  border-bottom: 3px solid var(--idx-orange);
  display: block;
}

@media (max-width: 800px) {
  .idx-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .idx-strip { grid-template-columns: 1fr; }
  .idx-hero { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* Homepage: il titolo "Home" sopra l'hero e' rumore, l'hero fa gia' da testata */
body.home .hero-section[data-type="type-1"] { display: none; }

/* L'hero e la striscia escono dal contenitore senza creare scroll orizzontale */
.entry-content > .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
html, body { overflow-x: hidden; }

/* Sulla home l'hero fa da testata: niente stacco grigio sotto l'header */
body.home .ct-container-full { padding-top: 0; }

/* ============================================================
   7. Carrello nell'header (elemento nativo Blocksy)
   ============================================================ */

.ct-cart-item .ct-cart-count,
.ct-header-cart .ct-cart-count {
  background: var(--idx-orange);
  color: var(--idx-white);
  font-family: var(--idx-body-font);
  font-weight: 600;
}
