/*
Theme Name: Product Regulatory
Theme URI: https://productregulatory.com
Description: Tema figlio di Kadence per productregulatory.com. Tutto il CSS personalizzato del sito vive in questo file, non nel Personalizza di WordPress.
Author: Alessandro Stella
Author URI: https://productregulatory.com
Template: kadence
Version: 1.1.0
Text Domain: productregulatory
*/


/* ==========================================================================
   INDICE
   1. Variabili (palette e tipografia)
   2. Tipografia e testo degli articoli
   3. Tabelle
   4. Figure e didascalie
   5. Blocchi CTA
   6. FAQ
   7. WooCommerce
   8. Utility
   ========================================================================== */


/* ==========================================================================
   1. VARIABILI
   Valori provvisori. Da sostituire quando definiamo l'identita visiva.
   ========================================================================== */

:root {
	/* Palette Product Regulatory v1.0 */
	--pr-ink:        #12212B;   /* testo principale */
	--pr-teal:       #0E5C63;   /* colore principale: titoli sezione, tabelle, link */
	--pr-signal:     #E4572E;   /* accento: SOLO pulsanti e CTA di acquisto */
	--pr-slate:      #5C6B75;   /* testo secondario, didascalie */
	--pr-mist:       #F4F6F7;   /* sfondi tenui, righe alterne */
	--pr-line:       #DCE3E7;   /* bordi e separatori */

	/* Alias usati nelle regole sotto */
	--pr-muted:      var(--pr-slate);
	--pr-bg-soft:    var(--pr-mist);
	--pr-primary:    var(--pr-teal);
	--pr-accent:     var(--pr-signal);

	/* Tipografia — i font sono caricati dal Customizer di Kadence */
	--pr-font-head:  'Archivo', system-ui, sans-serif;
	--pr-font-body:  'Source Sans 3', system-ui, sans-serif;

	--pr-radius:     6px;
	--pr-maxwidth:   760px;
}


/* ==========================================================================
   2. TIPOGRAFIA E TESTO DEGLI ARTICOLI
   ========================================================================== */

.entry-content {
	color: var(--pr-ink);
}

.entry-content p {
	margin: 0 0 1.15em;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--pr-font-head);
	font-weight: 500;
	color: var(--pr-ink);
}

.entry-content h2 {
	color: var(--pr-teal);
	display: table;              /* evita l'affiancamento del testo al titolo */
	margin: 2.2em 0 0.6em;
	line-height: 1.25;
}

.entry-content h3 {
	margin: 1.8em 0 0.5em;
	line-height: 1.3;
}

.entry-content ul,
.entry-content ol {
	margin: 0 0 1.15em 1.2em;
}

.entry-content li {
	margin-bottom: 0.35em;
}


/* Indice dei contenuti (Table of Contents) */

.entry-content ul.toc {
	background: var(--pr-bg-soft);
	border: 1px solid var(--pr-line);
	border-radius: var(--pr-radius);
	padding: 1.1em 1.4em 1.1em 2.4em;
	margin: 1.6em 0 2em;
	list-style: none;
}

.entry-content ul.toc li {
	margin-bottom: 0.4em;
	list-style: none;
}

.entry-content ul.toc a {
	text-decoration: none;
}

.entry-content ul.toc a:hover {
	text-decoration: underline;
}


/* ==========================================================================
   3. TABELLE
   Uso: <div class="tblwrap"><table class="prtable"> ... </table></div>
   Il wrapper rende la tabella scorrevole su mobile.
   ========================================================================== */

.tblwrap {
	overflow-x: auto;
	margin: 1.8em 0;
	-webkit-overflow-scrolling: touch;
}

table.prtable {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.94em;
}

table.prtable th,
table.prtable td {
	border: 1px solid var(--pr-line);
	padding: 0.6em 0.75em;
	text-align: left;
	vertical-align: top;
}

table.prtable th {
	font-family: var(--pr-font-head);
	background: var(--pr-teal);
	color: #fff;
	font-weight: 600;
}

table.prtable tr:nth-child(even) td {
	background: var(--pr-bg-soft);
}


/* ==========================================================================
   4. FIGURE E DIDASCALIE
   Uso: <figure class="fig"> ... <figcaption>Figure 1. ...</figcaption></figure>
   La didascalia sta SOTTO la figura.
   ========================================================================== */

figure.fig {
	margin: 2em 0;
	text-align: center;
}

figure.fig svg,
figure.fig img {
	max-width: 100%;
	height: auto;
}

figure.fig figcaption {
	margin-top: 0.7em;
	font-size: 0.88em;
	color: var(--pr-muted);
	text-align: center;
}


/* ==========================================================================
   5. BLOCCHI CTA
   Uso: <div class="pr-cta pr-cta--primary"> ... </div>
   Varianti: --primary, --accent, --soft
   ========================================================================== */

.pr-cta {
	border-radius: var(--pr-radius);
	padding: 1.5em 1.7em;
	margin: 2.2em 0;
}

.pr-cta p {
	margin: 0 0 0.8em;
}

.pr-cta p:last-child {
	margin-bottom: 0;
}

.pr-cta--primary {
	background: var(--pr-primary);
	color: #fff;
}

.pr-cta--primary a {
	color: #fff;
	text-decoration: underline;
}

.pr-cta--accent {
	background: var(--pr-accent);
	color: #fff;
}

.pr-cta--accent a {
	color: #fff;
	text-decoration: underline;
}

.pr-cta--soft {
	background: var(--pr-bg-soft);
	border: 1px solid var(--pr-line);
	color: var(--pr-ink);
}


/* ==========================================================================
   6. FAQ
   Uso: <div class="pr-faq"><h3>Domanda</h3><p>Risposta</p> ... </div>
   ========================================================================== */

.pr-faq {
	margin: 2.4em 0;
	border-top: 1px solid var(--pr-line);
	padding-top: 1.4em;
}

.pr-faq h3 {
	margin: 1.4em 0 0.4em;
	font-size: 1.08em;
}

.pr-faq h3:first-of-type {
	margin-top: 0;
}


/* ==========================================================================
   7. WOOCOMMERCE
   Regole minime. Da ampliare quando esistono le pagine prodotto.
   ========================================================================== */

.woocommerce .quantity input[type="number"] {
	border-radius: var(--pr-radius);
}


/* Occhiello sopra il titolo: <p class="pr-eyebrow">EU / US / AUSTRALIA</p> */

.pr-eyebrow {
	font-family: var(--pr-font-head);
	font-size: 0.78em;
	letter-spacing: 0.06em;
	color: var(--pr-teal);
	margin: 0 0 0.6em;
}


/* Pulsante di acquisto: <a class="pr-btn" href="...">Get the kit</a> */

a.pr-btn {
	display: inline-block;
	background: var(--pr-signal);
	color: #fff;
	font-family: var(--pr-font-head);
	text-decoration: none;
	padding: 0.7em 1.4em;
	border-radius: var(--pr-radius);
}

a.pr-btn:hover {
	background: #c8451f;
	color: #fff;
}


/* ==========================================================================
   8. UTILITY
   ========================================================================== */

.pr-lead {
	font-size: 1.1em;
	color: var(--pr-muted);
}

.pr-narrow {
	max-width: var(--pr-maxwidth);
	margin-left: auto;
	margin-right: auto;
}