/* ==========================================================================
   Edit Graf — kit grafico per i portali
   Ricavato dal pieghevole "Stampa, Soluzioni quando servono." (ott 2026).
   Indipendente da WordPress: includerlo prima del CSS del portale.
   ========================================================================== */

/* Font del pieghevole (titoli Archivo, testo Work Sans), ospitati in locale.
   Se la cartella fonts/ non c'è si usano i font di sistema. */
@font-face { font-family: "Archivo"; src: url("fonts/archivo-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("fonts/worksans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("fonts/worksans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("fonts/worksans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
    /* Marca */
    --eg-blu: #1259a6;          /* fascia contatti, "quando servono." */
    --eg-blu-scuro: #0b3f7a;
    --eg-blu-logo: #0a55a5;
    --eg-azzurro: #00aeef;
    --eg-azzurro-ch: #e6f2fb;
    --eg-inchiostro: #0d1726;   /* titoli */
    --eg-testo: #3b4859;
    --eg-tenue: #6a778a;
    --eg-linea: #d9e0e9;
    --eg-fondo: #f5f7fa;
    --eg-bianco: #ffffff;

    /* Tricolore */
    --eg-verde: #008c45;
    --eg-rosso: #cd212a;
    --eg-panna: #f1f2ee;

    /* Colori dei 12 servizi (cerchi delle icone) */
    --eg-c-stampa: #3aaee2;
    --eg-c-postalizzazione: #c4237b;
    --eg-c-modulistica: #ef7429;
    --eg-c-elettorale: #7ab342;
    --eg-c-tesserini: #2e9f4b;
    --eg-c-timbri: #6b3b8f;
    --eg-c-gadget: #e2312d;
    --eg-c-bandiere: #4a4fa3;
    --eg-c-grande-formato: #f3ac25;
    --eg-c-archivi: #6f6a66;
    --eg-c-rilegature: #20ad9f;
    --eg-c-ufficio: #1f82a6;

    --eg-font-titoli: "Archivo", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --eg-font-testo: "Work Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --eg-raggio: 12px;
    --eg-ombra: 0 1px 2px rgba(13, 23, 38, .05), 0 6px 18px rgba(13, 23, 38, .06);
}

/* Etichetta maiuscola spaziata ("CONTATTI", "I NOSTRI SERVIZI · 1") */
.eg-eyebrow {
    margin: 0 0 8px;
    font: 700 12px/1.2 var(--eg-font-testo);
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--eg-blu);
}

/* Titolo corposo con punto finale ("Raccontaci cosa ti serve.") */
.eg-title {
    margin: 0;
    font-family: var(--eg-font-titoli); font-weight: 800;
    letter-spacing: -.025em; line-height: 1.08;
    color: var(--eg-inchiostro);
}
.eg-title em { font-style: normal; color: var(--eg-blu); }

/* Filetto tricolore (sotto il claim nel pieghevole) */
.eg-tricolore {
    display: block; width: 120px; height: 5px; border-radius: 3px;
    background: linear-gradient(90deg, var(--eg-verde) 0 33.3%, var(--eg-panna) 33.3% 66.6%, var(--eg-rosso) 66.6% 100%);
}

/* Icona servizio: cerchio colorato con pittogramma bianco (PNG del kit) */
.eg-icon { display: inline-block; width: 48px; height: 48px; border-radius: 50%; flex: none; }
.eg-icon--sm { width: 32px; height: 32px; }
.eg-icon--lg { width: 64px; height: 64px; }

/* Pallino colorato con testo (numeri, sigle) negli stessi colori delle icone */
.eg-dot {
    display: inline-grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--eg-dot, var(--eg-blu)); color: #fff;
    font: 800 14px/1 var(--eg-font-titoli); letter-spacing: -.01em;
}
.eg-dot--1  { --eg-dot: var(--eg-c-stampa); }
.eg-dot--2  { --eg-dot: var(--eg-c-postalizzazione); }
.eg-dot--3  { --eg-dot: var(--eg-c-modulistica); }
.eg-dot--4  { --eg-dot: var(--eg-c-elettorale); }
.eg-dot--5  { --eg-dot: var(--eg-c-tesserini); }
.eg-dot--6  { --eg-dot: var(--eg-c-timbri); }
.eg-dot--7  { --eg-dot: var(--eg-c-gadget); }
.eg-dot--8  { --eg-dot: var(--eg-c-bandiere); }
.eg-dot--9  { --eg-dot: var(--eg-c-grande-formato); }
.eg-dot--10 { --eg-dot: var(--eg-c-archivi); }
.eg-dot--11 { --eg-dot: var(--eg-c-rilegature); }
.eg-dot--12 { --eg-dot: var(--eg-c-ufficio); }

/* Riquadro illustrazione tinto, come nelle righe servizi del pieghevole */
.eg-illustration { display: block; border-radius: var(--eg-raggio); overflow: hidden; }
.eg-illustration img { display: block; width: 100%; height: auto; }

/* Pulsante primario */
.eg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 38px; padding: 0 16px; border-radius: 9px; border: 0;
    background: var(--eg-blu); color: #fff !important; text-decoration: none;
    font: 600 14px/1 var(--eg-font-testo); cursor: pointer;
    transition: background .15s;
}
.eg-btn:hover { background: var(--eg-blu-scuro); }
.eg-btn--ghost { background: transparent; color: var(--eg-blu) !important; box-shadow: inset 0 0 0 1px var(--eg-linea); }
.eg-btn--ghost:hover { background: var(--eg-azzurro-ch); }

/* Piè di pagina: fascia CMYK + skyline e barra blu con i contatti */
.eg-footer { margin-top: auto; }
.eg-footer-band {
    background-color: #fff !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    width: 100%;
    aspect-ratio: 2400 / 99;
    min-height: 40px;
    background-image: url("illustrazioni/fascia-skyline.png");
    background-size: cover !important;
}
.eg-footer-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px;
    padding: 16px 32px;
    background: var(--eg-blu); color: #fff;
    font: 500 14px/1.4 var(--eg-font-testo);
}
.eg-footer-bar a { color: #fff; text-decoration: none; }
.eg-footer-bar a:hover { text-decoration: underline; }
.eg-footer-contacts { display: flex; flex-wrap: wrap; gap: 8px 32px; }

@media (max-width: 720px) {
    .eg-footer-band { min-height: 34px; }
    .eg-footer-bar { padding: 14px 16px; font-size: 13px; }
    .eg-footer-contacts { gap: 6px 20px; }
}