/* Sito vetrina scuolamaigret.com — spec/scuolateatro.com/02, Fase C.
   Ricostruzione del sito Wix (colori dal suo tema: fondo quasi bianco,
   rosso per la voce attiva) con un carattere da libro: EB Garamond
   (fonts/eb-garamond.css, ospitato da noi) per titoli, menu e testo,
   scelto il 26/10/2026 al posto di Georgia + Arial di Wix. Il Garamond ha
   l'occhio piccolo: le misure sono un po' più grandi di quelle Wix. */

:root {
    --site-ink: #313131;          /* color_15 del tema Wix */
    --site-paper: #fafafa;
    --site-red: #ed1c24;          /* color_3 del tema Wix */
    --site-muted: #727272;
    --site-line: #e6e6e6;
    --site-serif: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
    --site-sans: Arial, Helvetica, sans-serif;
}

body {
    background: var(--site-paper);
    color: var(--site-ink);
    font-family: var(--site-serif);
    font-size: 19px;
    line-height: 1.45;
}

/* il grassetto del Garamond è il semigrassetto (600): il 700 sintetico
   del browser impasterebbe le lettere */
strong, b { font-weight: 600; }

a { color: inherit; }
a:hover { color: var(--site-red); }

/* ---- header ---------------------------------------------------------- */
.site-header { text-align: center; padding: 1.25rem 1rem 0; }
.site-brand { display: inline-block; text-decoration: none; color: var(--site-ink); }
.site-brand:hover { color: var(--site-ink); }
/* il GIF è quadrato con molto bianco: Wix lo mostra ritagliato a 111×73 */
.site-logo { display: block; width: 111px; height: 73px; object-fit: cover; margin: 0 auto .2rem; }
.site-brand-name { display: block; font-family: var(--site-serif); font-size: 31px; line-height: 1.15; }
.site-brand-tag { display: block; font-family: var(--site-serif); font-size: 22px; line-height: 1.2; }
.site-quote { margin: .6rem auto 0; font-size: 18px; font-style: italic; }

/* ---- menu illustrato ------------------------------------------------- */
.site-nav ul {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    max-width: 1000px; margin: 2rem auto 0; padding: 0; list-style: none;
}
.site-nav li { flex: 1 1 0; min-width: 110px; }
.site-nav a { display: block; text-decoration: none; color: var(--site-ink); }
.site-nav-label { display: block; font-family: var(--site-serif); font-size: 22px; margin-bottom: .35rem; }
.site-nav a:hover .site-nav-label,
.site-nav a[aria-current="page"] .site-nav-label { color: var(--site-red); }
.site-nav img { display: block; width: 115px; height: 80px; object-fit: contain; margin: 0 auto; }

/* ---- contenuto ------------------------------------------------------- */
.site-main { padding: 2.5rem 1rem 3rem; }
.site-page { max-width: 1000px; margin: 0 auto; }
.site-title {
    font-family: var(--site-serif); font-size: 32px; font-weight: normal;
    text-align: center; margin-bottom: 2rem;
}
.site-body { text-align: center; }
/* giustezza da libro: 60-75 caratteri per riga; le griglie restano larghe */
.site-page > .site-body { max-width: 720px; margin: 0 auto; }
.site-body p { margin-bottom: 1.1rem; }
.site-body h2, .site-body h3, .site-body h4 { font-family: var(--site-serif); font-weight: normal; }
.site-body h2 { font-size: 27px; margin: 1.5rem 0 1rem; }
.site-body h3 { font-size: 24px; margin: 1.25rem 0 .75rem; }
.site-body h4 { font-size: 22px; margin: 1rem 0 .5rem; }
.site-body em { font-style: italic; }
.site-body img { max-width: 100%; height: auto; margin: .5rem auto; display: block; }
.site-body ul, .site-body ol { display: inline-block; text-align: left; }
.site-body a { text-decoration: underline; }

/* la home apre con il motto in grande: «À vous de jouer!», jouer in rosso */
.site-page-wide .site-body > h2:first-child {
    font-family: var(--site-serif); font-weight: 600; font-size: 36px; margin-top: 0;
}
.site-body h2 em { color: #d11111; }

/* ---- box laterale (News della home) ---------------------------------- */
.site-aside {
    position: relative; background: #fff; padding: 2rem 1.5rem 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18); text-align: center;
    font-family: var(--site-serif); font-size: 20px;
}
/* i due pezzi di nastro adesivo del box di Wix */
.site-aside::before, .site-aside::after {
    content: ""; position: absolute; left: 50%; width: 84px; height: 26px;
    background: rgba(235, 235, 235, .85); box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.site-aside::before { top: -12px; transform: translateX(-50%) rotate(-2deg); }
.site-aside::after { bottom: -12px; transform: translateX(-50%) rotate(3deg); }
.site-aside h2, .site-aside h3, .site-aside h4 { font-family: var(--site-serif); font-weight: normal; }
.site-aside h3 { font-size: 20px; font-style: italic; margin: 1.5rem 0 .25rem; }
.site-aside p { margin-bottom: .75rem; }
.site-aside > p:first-child a { text-decoration: none; }   /* «News» in testa */
.site-aside img { max-width: 110px; height: auto; display: block; margin: .25rem auto .75rem; }
.site-aside hr { margin: 1.5rem 0; border-color: var(--site-muted); }

/* ---- griglie di riquadri --------------------------------------------- */
.site-tiles {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem 1.5rem; margin-top: 3rem;
}
.site-tile { display: block; text-align: center; text-decoration: none; color: var(--site-ink); }
.site-tile img {
    display: block; width: 100%; height: 190px; object-fit: contain; margin: 0 auto;
}
.site-tiles-large .site-tile img { height: 290px; }
.site-tile-label {
    display: inline-block; margin-top: 1.25rem; padding: .1rem .75rem;
    font-family: var(--site-serif); font-size: 22px; background: rgba(255, 255, 255, .7);
}
.site-tile:hover .site-tile-label { color: var(--site-red); }

/* La goccia d'acqua al passaggio del mouse sui disegni cliccabili è in
   ripple.js (onde concentriche su <canvas>, non realizzabili in CSS). */

/* ---- news ------------------------------------------------------------ */
.site-news { max-width: 820px; margin: 0 auto; }
.site-news-item { padding: 1.6rem 0; border-bottom: 1px solid var(--site-line); text-align: center; }
/* con la copertina (post scritti da island): immagine a sinistra, testo a destra */
.site-news-item.has-cover { display: grid; grid-template-columns: 240px 1fr; gap: 1.75rem; text-align: left; align-items: start; }
.site-news-cover { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; }
.site-news-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.site-news-cover:hover img { transform: scale(1.03); }
.site-news-item h2 { font-family: var(--site-serif); font-size: 25px; font-weight: normal; margin-bottom: .25rem; }
.site-news-item h2 a { text-decoration: none; }
.site-news-item p { margin-bottom: .6rem; }
.site-news-more { font-style: italic; }
.site-date { color: var(--site-muted); font-size: 16px; font-style: italic; }
.site-pager { display: flex; justify-content: space-between; margin-top: 1.5rem; }
.site-breadcrumb { text-align: center; font-size: 14px; margin-bottom: .5rem; }
.site-post .site-body { text-align: left; max-width: 740px; margin: 0 auto; }
.site-post-date { text-align: center; margin-top: -1.25rem; margin-bottom: 1.75rem; }
.site-post-cover { display: block; width: 100%; max-width: 740px; height: auto; margin: 0 auto 2rem; }
/* anteprima aperta dalla gestione in island */
.site-preview-band {
    position: sticky; top: 0; z-index: 10; margin: -2.5rem -1rem 2rem; padding: .5rem 1rem;
    text-align: center; font-style: italic; color: #fff; background: #313131;
}
@media (max-width: 767px) {
    .site-news-item.has-cover { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---- footer ---------------------------------------------------------- */
.site-footer { text-align: center; padding: 2rem 1rem 2.5rem; font-size: 16px; border-top: 1px solid var(--site-line); }
.site-footer p { margin: .75rem 0 0; }
.site-footer a { text-decoration: none; }
.site-cf { font-size: 15px; }

/* ---- schermi stretti ------------------------------------------------- */
@media (max-width: 767px) {
    .site-nav ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 0; }
    .site-nav li { min-width: 0; }
    .site-nav img { width: 80px; height: 56px; }
    .site-nav-label { font-size: 19px; }
    .site-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
    .site-tile img, .site-tiles-large .site-tile img { height: 170px; }
    .site-tile-label { font-size: 19px; }
}