/*
Theme Name: WebApp Zerocento (refactor)
Author: Massimiliano Muccinelli [ZeroCento]
Version: 1.1
License: GPLv2 or later
*/

/* =========================
   ROOT / TOKENS
========================= */
:root{
  /* Brand */
  --brand: #F5A02A;           /* “fucsia” usato nel tema */
  --brand-weak: rgba(245,160,42,.15); /* ~15% */    /* brand con alpha per fondi soft */
  --brand-dark: #CD93b8;      /* tono alternativo presente nel file */
  --gray-900: #000;
  --gray-700: #58585a;
  --gray-500: #888888;
  --gray-100: #eaeaea;
  --white: #fff;

  /* Typography */
  --font-sans: "Lato", sans-serif;
  --font-head: "Raleway", sans-serif;

  /* Spacing & radius */
  --sp-0: 0;
  --sp-1: .2em;
  --sp-2: .4em;
  --sp-3: .8em;
  --sp-4: 1em;
  --sp-6: 1.5em;
  --radius-0: 0;
  --radius-2: 4px;
  --radius-4: 8px;
  --radius-8: 16px;

  /* Effects */
  --shadow-soft: 0 10px 10px var(--gray-500);
  --transition: .2s ease;
}

/* =========================
   WORDPRESS EDITOR
========================= */
.entry-content img{ margin: 0 0 var(--sp-6) 0; }

.alignleft, img.alignleft{ float:left; display:inline; margin-right:var(--sp-6); }
.alignright, img.alignright{ float:right; display:inline; margin-left:var(--sp-6); }
.aligncenter, img.aligncenter{ display:block; margin:0 auto; clear:both; }
.alignnone, img.alignnone{ /* intentionally blank */ }

.wp-caption{
  margin-bottom: var(--sp-6);
  text-align:center;
  padding-top:5px;
}
.wp-caption img{ border:0; padding:0; margin:0; }
.wp-caption p.wp-caption-text{
  line-height:1.5; font-size:10px; margin:0;
}

.wp-smiley{ margin:0!important; max-height:1em; }

blockquote.left{
  float:left; width:33%;
  margin:0 20px 0 0; text-align:right;
}
blockquote.right{
  float:right; width:33%;
  margin:0 0 0 20px; text-align:left;
}

/* =========================
   BASE / GLOBAL
========================= */
body, p, input, textarea, select{
  font-family: var(--font-sans);
  text-align: justify;
}

h1, h2, h3, h4{
  font-family: var(--font-head);
  overflow:hidden;
  position: relative; /* per gli :after dei titoli con linea */
}

a{ font-weight:bold; }
#main-container a{
  color: var(--brand);
  font-style: italic;
  font-weight: bold;
  transition: color var(--transition), background-color var(--transition), opacity var(--transition);
}
#main-container a:hover{ text-decoration:none; }
#main-container p a:hover,
#main-container ul li a:hover,
#main-container ul li ul li a:hover{
  background-color: var(--brand);
  color: var(--white);
}

a img:hover{ background-color: transparent; }

/* Titoli con linea */
h1.linea:after, h3.linea:after{
  content:"";
  position:absolute;
  left:calc(100% + 10px);
  right:0;
  bottom:.5em;
  border-bottom:1px solid currentColor;
  z-index:1;
}
h3.linea.bianco:after{ color: var(--white); }

/* Evidenze su testo */
span.back-bianco{ background-color: var(--white); padding-right:5px; }
span.back-fucsia{ background-color: var(--brand); padding-right:5px; }

/* Utility color */
.fucsia{ color: var(--brand); }
.bianco{ color: var(--white); }
.bordofucsia{ border-color: var(--brand); }

/* Utility spacing */
.marginebasso02{ margin-bottom: var(--sp-1); }
.marginebasso04{ margin-bottom: var(--sp-2); }
.marginealto02{ margin-top: var(--sp-1); }
.marginealto08{ margin-top: var(--sp-3); }

/* Utility effects */
.ombra{ box-shadow: var(--shadow-soft); }
.corsivo{ font-style: italic; }

/* Divider / Gradiente */
#grad{
  background: linear-gradient(var(--white), var(--gray-100));
  height:1em;
}

/* =========================
   TESTATA / NAV
========================= */
#testata{
  border-top: solid 1em var(--brand);
  padding-top: var(--sp-4);
}
#testata img{ width:100%; }

.btn-fucsia{
  color: var(--brand);
  background-color: var(--white);
  border: 1px solid var(--brand);
  text-transform: uppercase;
  border-radius: var(--radius-0);
  font-family: var(--font-head);
  height: 2em;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn-fucsia:hover{
  color: var(--white);
  background-color: var(--brand);
  border-color: var(--brand);
}

#secondabarra a{
  color: var(--brand);
  text-transform: uppercase;
  font-family: var(--font-head);
}

.menu-item{
  padding: 2px 10px;
  border-left: 4px solid var(--white);
}

/* =========================
   SEZIONI HOME
========================= */
/* ACQUISTA I NOSTRI SERVIZI */
#acquistaservizi{
  background-color: var(--brand-weak);
}
#acquistaservizi h3{
  text-align:center;
  font-size:3em;
  font-weight:bold;
}

/* SERVIZI */
#servizi h3{ font-weight:bold; }

figure.figureservizio{ position:relative; overflow:hidden; vertical-align:top; }
figure.figureservizio img{
  transition: transform .3s ease;
  transform: scale3d(1,1,1);
}
figcaption.figureservizio{
  position:absolute; inset:0;
  display:table; width:100%; height:100%;
  text-align:center; font-weight:bold;
}
figcaption.figureservizio div{
  display:table-cell; vertical-align:middle;
  position:relative; top:20px; opacity:0; color:#2c3e50; text-transform:uppercase;
  transition: top .3s ease, opacity .3s ease;
}
figure.figureservizio:hover figcaption{ background: rgba(221,18,123,.3); }
figure.figureservizio:hover figcaption div{ top:0; opacity:1; }
figure.figureservizio:hover img{ transform: scale3d(1.2,1.2,1); }

h4.titoloservizio{
  margin-top:4em;
  background-color: var(--brand);
  padding:10px;
  color: var(--white);
}

/* ULTIME NEWS */
#ultimenews{
  background-color: var(--brand);
}
#ultimenews h3{
  margin-top: var(--sp-1);
  padding: .1em 10px;
  position:relative;
  background-color: var(--brand);
  font-weight:bold;
}
#ultimenews a{ color: var(--gray-900); }

#ultimenews .card img.card-img-top{
  filter: grayscale(60%);
  transition: filter .3s ease;
}
#ultimenews .card:hover img.card-img-top{ filter:none; }

#carouselUltimeNews .carousel-indicators{ bottom:-40px; }

#ultimenews .card-img-overlay{ padding:2em 0; width:70%; }
#ultimenews .card-img-overlay h4.card-title,
#ultimenews h4.card-title{ padding:.5em 2em; }

#ultimenews #titolocard{
  margin-left:-1.3em;
  background-color: var(--brand);
  width:70%;
}
#ultimenews #titolocard h4{ color: var(--white); }

/* VIDEO */
#video{ padding-top: var(--sp-1); }

/* PROGETTI / RETI / COLLABORAZIONI */
#progettireticollaborazioni{ padding-top: var(--sp-1); }

/* FB */
#fb{ padding-top: var(--sp-1); }

/* =========================
   FOOTER
========================= */
#footer{
  padding-top:.7em;
  background-color: var(--gray-700);
  font-size:.8em;
  margin-top:.5em;
  color: var(--white);
}
#footer p{ font-size: small; }
#footer a{ color: var(--white); font-weight:bold; }

/* =========================
   PAGINE
========================= */
#featuredimg{ padding-top:.7em; }
#titolo{ overflow:hidden; }
#titolo h1{ text-transform: uppercase; }
#titolo h1.linea:after{ bottom:.7em; }

#sottotitolo h3{
  font-weight:bold;
  font-size: larger;
  margin-top:-.7em;
}
#citazione p{ font-size: larger; font-weight:bold; }
#citazione small{ margin-top:-1em; }

/* Blockquote stile */
blockquote{
  background:#f4b7d7;
  border-left:10px solid var(--brand);
  margin:1.5em 10px;
  padding:.5em 10px;
  quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before,
blockquote:after{
  color: var(--brand);
  font-size:4em;
  line-height:.1em;
  vertical-align:-.4em;
}
blockquote:before{ content: open-quote; margin-right:.25em; }
blockquote:after{ content: close-quote; margin-left:.25em; }
blockquote p{ display:inline; font-style:italic; }

/* =========================
   CONTENUTO
========================= */
p, ul li{ font-size: large; }

/* =========================
   WOOCOMMERCE
========================= */
#woocommerce-billing-fields__field-wrapper .woocommerce form .form-row input.input-text,
#woocommerce-billing-fields__field-wrapper .woocommerce form .form-row textarea,
#woocommerce-billing-fields__field-wrapper .woocommerce form .form-row select{
  font-family: var(--font-sans) !important;
  font-style: oblique !important;
}

.woocommerce-input-wrapper{ width:100% !important; }
#billing_piva_field{ display:none; }

/* Bottoni alt */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  background-color: var(--brand-dark);
  transition: background-color var(--transition), color var(--transition);
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{
  background-color: var(--brand);
}

/* Titolo prodotto hover nell’elenco */
.woocommerce ul.products li.product a.woocommerce-loop-product__link:hover h2.woocommerce-loop-product__title,
a:hover h2.woocommerce-loop-product__title{
  background-color: var(--brand);
}

/* Checkout CTA hover */
#main-container a.checkout-button:hover{ color: var(--white); }

.col-1{ max-width:100%; }
label.error, .woocommerce-error{ font-size:18px; }

/* Disabilita zoom galleria (se overlay JS attivo altrove) */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{ pointer-events:none; }
.single-product .image-overlay{ display:none !important; }

/* Righe prezzo zero nascoste/neutralizzate */
tr[data-price="0.00"]{ background-color:#eee; color:#eee; }
tr[data-price="0.00"] td.globalcartcol input{ display:none; }

p span .woocommerce-input-wrapper{ width:100px; }

/* Fatturazione PA/PEC nascosti */
#billing_pec_field, #billing_pa_code_field{ display:none !important; }

/* Nascondi galleria per specifici prodotti */
#product-38870 .woocommerce-product-gallery,
#product-39011 .woocommerce-product-gallery,
#product-39016 .woocommerce-product-gallery{ display:none !important; }

/* Allarga summary quando galleria è nascosta */
#product-38870 .summary,
#product-39011 .summary,
#product-39016 .summary{ float:left; width:100%; }

/* Azione “invoice” nelle orders */
td.woocommerce-orders-table__cell-order-actions a.invoice{ display:none; }

/* Thickbox fix */
#TB_ajaxContent .form-row{ display: inherit !important; }

/* Note ordine */
.woocommerce-checkout form textarea#order_comments{
  height:12em;
  width:12em;
}

/* Modal cookies – chiudi */
a.chiudi_cookie{
  width:auto !important;
  margin-left:81% !important;
  background:var(--white) !important;
  border:#000 !important;
  color:#000 !important;
}

/* Coupon */
.coupon{ display:none !important; }

/* =========================
   MEDIA / EMBED
========================= */
.full-width-youtube-video{
  position:relative;
  padding-bottom:56.25%;
  height:0;
}
.full-width-youtube-video iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
}

/* =========================
   LAYOUT MODERNO SINGLE WC
========================= */
.container-modern{
  margin:0 auto;
  padding: clamp(16px, 2vw, 32px);
  max-width:1100px;
}

.wc-single__card{
  background: var(--wc-bg, var(--white));
  border-radius: var(--radius-8);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  padding: clamp(16px, 2vw, 32px);
}

.wc-single__header{ margin-bottom:8px; }

.wc-single__grid{
  display:grid;
  grid-template-columns: 1fr; /* predisposto a estensioni future */
  gap:24px;
}

/* Summary sticky su viewport grandi */
@media (min-width: 992px){
  .wc-single__summary{ position:sticky; top:24px; }
}

.wc-single__extra{ margin-top:24px; }


/* ------------------- PERSONALIZZAZIONI --------------*/
/* Fondo brand-weak per il box informativo */
/* Box informativo tra logo e menu */
.brand-weak-bg{
  /* usa la variabile se c'è, altrimenti un rgba ben visibile */
  background-color: var(--brand-weak, rgba(245,160,42,.15)) !important;
  border: 1px solid rgba(245,160,42,.35);
  border-radius: 8px;
}

/* opzionale: assicura che occupi tutta la colonna */
#ecom-note .brand-weak-bg{ width:100%; }

/* Riduci al minimo lo “stacco” tra testo e menu */
#ecom-note { margin-right: 0; }
#menu-col  { margin-left: 0; }

/* Tutti i link in bold (se non l’hai già messo) */
a, a:link, a:visited, a:hover, a:active { font-weight:700 !important; }


/* Fondo brand-weak e stile link nel box informativo */
.brand-weak-bg{
  background-color: var(--brand-weak, rgba(245,160,42,.15)) !important;
  border: 1px solid rgba(245,160,42,.35) !important;
  border-radius: 8px !important;
}

/* Link nel box: arancioni e bold */
#ecom-note .brand-weak-bg a{
  color: var(--brand, #F5A02A) !important;
  font-weight: 700 !important;
  text-decoration: none;
}

#ecom-note .brand-weak-bg a:hover{
  color: #fff !important;
  background-color: var(--brand, #F5A02A) !important;
  transition: .2s ease;
  padding: 0 2px;
}

/* Logo con mini-badge ancorato in basso */
#logo { position: relative; }
#logo .logo-primary img { display:block; width:100%; height:auto; }

/* badge in basso a sinistra, ~50% della larghezza del logo */
#logo .logo-secondary{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 50%;
  max-width: 180px;  /* opzionale, regola a piacere */
}
#logo .logo-secondary img{
  display:block;
  width:100%;
  height:auto;
}