/*
 * Design di base — tema Er Canaparo (restyle 15/10/2026)
 *
 * Token di colore, font e stili globali (testo, titoli, link, pulsanti, campi).
 * Caricato subito dopo style.css e prima degli altri CSS del tema, che usano
 * questi token: i colori si cambiano qui, non nei singoli file.
 *
 * Palette: verde foresta/salvia (#1e3a2b / #2d5a40) su sfondo chiaro (#f8faf9);
 * arancione come unico colore d'accento (carrello, "Procedi al pagamento", CTA).
 */

/* Plus Jakarta Sans (SIL Open Font License 1.1), variabile 200–800, ospitato nel tema:
   niente richieste a Google Fonts. */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/pjs-latin-ext.woff2") format("woff2-variations"), url("../fonts/pjs-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/pjs-latin.woff2") format("woff2-variations"), url("../fonts/pjs-latin.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;
}

:root {
    /* Verdi del brand */
    --erc-forest: #1e3a2b;
    --erc-sage: #2d5a40;
    --erc-sage-light: #4f7d62;
    --erc-mint: #e8f0eb;
    --erc-mint-strong: #d3e3d9;

    /* Ruoli (usati da tutti i CSS del tema) */
    --erc-primary: var(--erc-sage);
    --erc-primary-dark: var(--erc-forest);
    --erc-accent: #f39a2b;
    --erc-accent-dark: #e8891a;
    --erc-on-accent: #1f1a12; /* testo sui fondi arancioni: il bianco non ha contrasto sufficiente */
    --erc-bg: #f8faf9;
    --erc-surface: #ffffff;
    --erc-border: #e2e8f0;
    --erc-border-strong: #cbd5e1;
    --erc-text-dark: #1a2e26;
    --erc-text: #33443b;
    --erc-text-muted: #5f6f67;
    --erc-topbar-bg: var(--erc-mint);
    --erc-danger: #b42318;

    --erc-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --erc-radius-sm: 8px;
    --erc-radius: 12px;
    --erc-radius-lg: 16px;
    --erc-shadow-sm: 0 1px 2px rgba(16, 24, 20, .06);
    --erc-shadow: 0 4px 14px rgba(16, 24, 20, .07);
    --erc-shadow-lg: 0 12px 32px rgba(16, 24, 20, .12);
    --erc-focus: 0 0 0 3px rgba(45, 90, 64, .28);
}

/* ------------------------------------------------------------
   Testo
   ------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body,
button,
input,
select,
textarea {
    font-family: var(--erc-font);
}
body {
    background-color: var(--erc-bg);
    color: var(--erc-text);
    font-size: 16px;
    line-height: 1.6;
    /* Plus Jakarta Sans ha uno spazio tra le parole molto stretto (0,17em, contro ~0,28em dei
       font di sistema): nei testi piccoli le parole sembrano attaccate. */
    word-spacing: .06em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* GeneratePress "one container": il contenitore resta trasparente, lo sfondo è quello del body
   e i blocchi (schede, articoli) hanno un fondo bianco proprio. */
.one-container .container,
.one-container .site-content,
.site.grid-container { background-color: transparent; }
/* Padding del contenitore GeneratePress (40px, 30px su mobile): la home gestisce i propri
   margini, sulle altre pagine su telefono si riduce per non sprecare larghezza. */
.home.one-container .site-content { padding: 0; }
@media (max-width: 768px) {
    .one-container .site-content { padding: 12px; }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--erc-font);
    color: var(--erc-text-dark);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

a { color: var(--erc-primary); }
a:hover,
a:focus { color: var(--erc-primary-dark); }

::selection { background: var(--erc-mint-strong); color: var(--erc-forest); }

:focus-visible {
    outline: 2px solid var(--erc-primary);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   Campi dei moduli
   ------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
    border-color: var(--erc-border-strong);
    border-radius: var(--erc-radius-sm);
    color: var(--erc-text-dark);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--erc-primary);
    box-shadow: var(--erc-focus);
    outline: none;
}

/* ------------------------------------------------------------
   Pulsanti WooCommerce (carrello, account, pagine prodotto)
   ------------------------------------------------------------ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    font-family: var(--erc-font);
    background-color: var(--erc-primary);
    color: #fff;
    border-radius: var(--erc-radius-sm);
    font-weight: 600;
    padding: 12px 20px;
    transition: background-color .15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background-color: var(--erc-primary-dark);
    color: #fff;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
    background-color: var(--erc-accent);
    color: var(--erc-on-accent);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: var(--erc-accent-dark);
    color: var(--erc-on-accent);
}

/* ------------------------------------------------------------
   Avvisi WooCommerce (carrello vuoto, prodotto aggiunto, errori)
   ------------------------------------------------------------ */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
    border: 1px solid var(--erc-border);
    border-left: 4px solid var(--erc-primary);
    border-radius: var(--erc-radius);
    background: var(--erc-surface);
    color: var(--erc-text-dark);
    box-shadow: var(--erc-shadow-sm);
}
.woocommerce-error { border-left-color: var(--erc-danger); }
/* style.css ereditato da Avada: .woocommerce-info { background:#4ca754 !important; color:#fff !important }
   → nel checkout il link "Clicca qui per inserire il codice" era verde su verde, illeggibile. */
.woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-info,
.erc-checkout-form .woocommerce-info {
    background: var(--erc-surface) !important;
    color: var(--erc-text-dark) !important;
    border: 1px solid var(--erc-border);
    border-left: 4px solid var(--erc-primary);
    border-radius: var(--erc-radius);
    padding: 12px 16px !important;
}
.woocommerce-info a { color: var(--erc-primary); font-weight: 700; text-decoration: underline; }
.woocommerce-info::before,
.woocommerce-message::before { color: var(--erc-primary); }
.woocommerce-error::before { color: var(--erc-danger); }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}