/**
	FONT GLOBALI (self-hosted in assets/fonts/, nessuna dipendenza esterna)
	I file sono font variabili: un solo file copre l'intero range di pesi
	dichiarato in ogni @font-face (il browser interpola in base al peso
	effettivamente usato dal CSS).
**/
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/roboto.woff2') format('woff2');
}

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/playfair-display.woff2') format('woff2');
}

@font-face {
	font-family: 'Playfair Display';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/playfair-display-italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Cinzel';
	font-style: normal;
	font-weight: 600 900;
	font-display: swap;
	src: url('../fonts/cinzel.woff2') format('woff2');
}

:root {
    /* base */
    --color-bg: #F7F3EB;
    --color-text: #3F3B36;
    --color-text-muted: #6B5D4F;

    /* accento (terracotta / oro) */
    --color-accent: #A14D2A;
    --color-accent-hover: #C4973B;

    /* titoli */
    --color-heading-1: #6B4F2A;
    --color-heading-2: #8B6B3F;

    /* oro pallido (testo su sfondi scuri header/footer) */
    --color-gold: #E7D6A5;
    --color-gold-bright: #F6E7B5;

    /* bordi/testo neutri a tema caldo (al posto dei grigi neutri) */
    --color-border-warm: #B8965D;
    --color-border-muted: #D8CCB6;

    /* testo menu/nav */
    --color-menu-text: #4E3B31;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
}

/**
	HEADER
**/
header {
    background-color: var(--color-bg);
    border-bottom:1px solid var(--color-border-warm);
}

.site-header{
    display: flex;
    align-items: center;       /* logo e blocco titolo centrati verticalmente */
    justify-content: center;   /* tutto centrato orizzontalmente */
    gap: 1em;                  /* spazio tra logo e titolo */
    padding: 1em 2em 1.5em 2em;  /* spazio anche in basso */
    font-family: 'Playfair Display', serif; /* titolo e sottotitolo */
    /* venatura generata (assets/images/header-texture-olive.jpg): stessa
       texture/grana dell'originale marrone, ricolorata in tonalita' #7b7d0c */
    background-image: url("../images/global/header-texture-olive.jpg");
    background-size: cover;
    background-position: center;

    color:var(--color-gold);
    box-shadow:
    inset 0 1px rgba(255,255,255,.12),
    0 2px 6px rgba(0,0,0,.18);
}

.site-logo {
    height: 60px;
    width: auto;
    border-radius: 10px;  /* arrotondamento leggero */
}

.site-title-block {
    text-align: center;
}

.site-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 2.4em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:var(--color-gold);
    text-shadow:
        0 1px 0 rgba(255,255,255,.10),
        0 2px 3px rgba(0,0,0,.35);
}

.site-subtitle {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.1em;
    letter-spacing: 0.03em;
    color:var(--color-gold);
}

.site-title-link {
    text-decoration: none;
    color: inherit;
}

/**
    NAV BAR (contenitore menu + lingua)
**/
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2em;
    background:#DCCFB7;
    border-bottom:1px solid #BFAE90;
}

/**
    MAIN MENU
**/
.main-menu {
    margin: 0;
    padding: 0.2em 0;
    text-align: center;
    font-family: 'Roboto', sans-serif;

    color:var(--color-menu-text);
}

.main-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: 1em;
}

.main-menu a {
    text-decoration: none;
    color: var(--color-menu-text);
    font-weight: bold;
    line-height: 1;
    padding: 0.2em 0;
    display: inline-block;
}

.main-menu a:hover  {
    color:var(--color-accent);
}

/**
    LANG SWITCHER
**/
.lang-switch {
    display: flex;
    gap: 0.5em;
    font-family: 'Roboto', sans-serif;
    color:var(--color-menu-text);
}

.lang-switch a,
.lang-switch .active {
    text-decoration: none;
    color: var(--color-menu-text);
    font-weight: bold;
    padding: 0.2em 0.6em;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-switch a:hover {
    background:#CDBB99;
}

.lang-switch .active {
    background:var(--color-accent);
    color:white;
    cursor: default;
}

/**
    NAV RIGHT (lingua + ricerca, raggruppati a destra)
**/
.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.search-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-menu-text);
    transition: color 0.2s ease;
}

.search-link:hover {
    color: var(--color-accent);
}

.search-icon {
    width: 20px;
    height: 20px;
}

/**
	FOOTER
**/
footer {
    /* venatura generata (assets/images/footer-texture-olive.jpg): stessa
       texture/grana dell'originale marrone, ricolorata in tonalita' #7b7d0c */
    background-image: url("../images/global/footer-texture-olive.jpg");
    background-size: cover;
    background-position: center;
    color:var(--color-gold);
    padding: 0.8em 1em;
    text-align: center;
    font-size: 0.85em;
    border-top:1px solid var(--color-border-warm);
    font-family: 'Roboto', sans-serif;
    box-shadow:
    inset 0 8px 10px rgba(255,255,255,.06),
    inset 0 -8px 12px rgba(0,0,0,.15);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
}

footer p {
    margin: 0;
}

footer a {
    color:var(--color-gold-bright);
    text-decoration: none;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
}

footer a:hover {
    text-decoration: underline;
}

.footer-logo {
    height: 32px;
    width: auto;
    margin-top: 0.3em;
    opacity: 0.9;
}

.footer-patrocinio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    margin-top: 1.5em;
    padding-top: 1em;
    border-top: 1px solid rgba(231, 214, 165, 0.25);
    font-size: 0.9em;
    color: var(--color-gold);
    text-align: center;
}

.patrocinio-logo {
    height: 40px;
    width: auto;
}

.patrocinio-text {
    margin: 0;
    line-height: 1.2;
}

/**
	BREADCRUMB
**/
.breadcrumb {
    font-size: 0.85em;
    margin: 0.5em 0 1em 1em;
    color:var(--color-text-muted);
    font-family: 'Roboto', sans-serif;
}

.breadcrumb a {
    color:var(--color-heading-2);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/**
	SUBMENU
**/
.sub-menu {
    text-align: center;
    margin: 0.8em 0;
    padding: 0.4em 0;
    background:#EFE5D3;
    border:1px solid #D7C6A9;
    border-radius: 6px;
}

.sub-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    gap: 1em;
}

.sub-menu a {
    text-decoration: none;
    color:var(--color-menu-text);
    font-weight: 600;
}

.sub-menu a:hover {
    text-decoration: underline;
    color:var(--color-accent);
}

/**
    TITOLO
**/
/* Titolo principale della pagina */
h1 {
    text-align: center;      /* centra il titolo */
    margin: 0 0 1em 0;       /* spazio sotto il titolo */
    line-height: 1.2;
    font-weight: bold;
    color:var(--color-heading-1);
}

/* Occhiello sotto il titolo (da <h4 class="comment"> legacy: "a cura di X",
   date evento, ecc. - vedi campo "subtitle" nel frontmatter) */
.page-subtitle {
    text-align: center;
    margin: -0.5em 0 1.5em 0;
    font-style: italic;
    font-size: 0.85em;
    color: var(--color-text-muted);
}

h2{
    color:var(--color-heading-2);
}

h3{
    color:var(--color-accent);
}

/**
	CONTENT
**/
.page-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5em;
    line-height: 1.7;
    font-size: 1em;
    color: var(--color-text);
}

.page-content p {
    margin: 0 0 1em 0;
    text-align: left;   /* forza allineamento a sinistra */
}	

.page-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5em auto;
    border-radius: 6px;
}

.page-content blockquote {
    margin: 1.5em 0;
    padding: 0.3em 1.2em;
    border-left: 4px solid var(--color-accent);
    font-style: italic;
    color: var(--color-text);
}

.page-content a {
    color:var(--color-accent);
}

.page-content a:hover {
    color:var(--color-accent-hover);
}

/* ARTICLE BASE */
.page-article {
    text-align: justify;
    line-height: 1.7;
}

/* contiene le figure.figure-float: senza questo, se il testo dopo l'ultima
   immagine flottante e' piu' corto dell'immagine stessa, il contenitore si
   chiude in anticipo e il footer scorre sopra l'immagine ancora visibile */
.page-article::after {
    content: "";
    display: table;
    clear: both;
}

/* figure base */
.page-article figure {
    margin: 1.5em 0;
}

.page-article figure.figure-center {
    display: block;
    margin: 2em auto;
    max-width: 100%;
    text-align: center;
}

.page-article figure.figure-center img {
    display: block;
    margin: 0 auto;
    /* foto verticali: a larghezza piena diventerebbero piu' alte dello schermo
       (es. generaleditivoli, 900x1344): si limita l'altezza e la larghezza
       segue in proporzione; le foto orizzontali non cambiano */
    width: auto;
    max-width: 100%;
    max-height: min(80vh, 800px);
}

.page-article figure.figure-center figcaption {
    text-align: center;
    margin-top: 0.5em;
}

/* figure float */
.page-article figure.figure-float {
    float: left;
    max-width: 55%;
    margin: 0.5em 1em 1em 0;
}

.page-article figure.figure-float + figure.figure-float {
    clear: both;
}

/* galleria compatta (3+ figure-float consecutive, es. le foto del Miglior
   Carro - vedi group_consecutive_figure_floats in build_html.py): in griglia
   invece che una sotto l'altra, il clear:both sopra qui non si applica */
.page-article .figure-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    clear: both;
}

.page-article .figure-grid figure.figure-float {
    float: none;
    flex: 0 0 calc(50% - 0.5em);
    max-width: calc(50% - 0.5em);
    margin: 0;
}

.page-article figure img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

.page-article figcaption {
    font-size: 0.9em;
    color: var(--color-text-muted);
    margin-top: 0.5em;
}

/* icone UI decorative dentro un articolo (es. auto/bus/treno in
   servizi/viaggio/arrivare/) - vedi fix_article_images in build_html.py:
   niente figure/caption, solo una piccola icona a fianco del paragrafo */
.page-article .inline-icon {
    float: left;
    clear: both;
    width: 48px;
    height: 48px;
    margin: 0 0.75em 0.5em 0;
}

/* SECTION BASE */
.page-section {
    max-width: 1000px;
}

.page-section h2 {
    margin-top: 2em;
}

.page-section img {
    margin: 2em auto;
}

.page-section p.lead {
    font-size: 1em;
    font-style: italic;
    line-height: 1.9;
    margin-bottom: 2em;
    color: var(--color-text);
}

.page-section img.hero-image {
    max-width: 100%;
    height: auto;
    max-height: 380px;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
}

/* HUB BASE */
.page-hub {
    max-width: 1100px;
}

.page-hub p {
    margin: 0.3em 0;
}

.page-hub a {
    display: block;
    padding: 0.4em 0;
}

.page-hub .hub-lead {
    font-size: 1em;
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 1.5em;
}

.page-hub img.hub-hero {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    margin: 1.5em auto;
}

.page-hub .card-grid {
    display: grid;
    /* auto-fill e non auto-fit: con una card sola (es. hub di un anno con una
       notizia) la card resta larga come le altre invece di occupare tutta la riga */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1em;
    margin-top: 1.5em;
}

.page-hub .card {
    display: block;
    padding: 1em;
    background:#FCFAF6;
    border:1px solid var(--color-border-muted);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.page-hub .card-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;      /* foto verticali: ritagliate, non distorte */
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 0.6em;
}

.page-hub .card:hover {
    background:#F2E7D3;
    transform: translateY(-3px);
}

/* =========================
   SPOTLIGHT GRID (box "In evidenza" con piu' voci affiancate,
   compatte, invece di un section-block a piena larghezza per voce)
========================= */

.spotlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.spotlight-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-muted);
    border-radius: 10px;
    transition: transform 0.2s ease;
}

.spotlight-item:hover {
    transform: translateY(-3px);
}

.spotlight-thumb {
    flex: none;
    display: block;
}

.spotlight-thumb img {
    width: 96px;
    height: 72px;
    object-fit: cover;
    margin: 0;
    border-radius: 8px;
    display: block;
}

.spotlight-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* titolo e testo NON sono dentro il link: solo immagine e titolo lo sono
   (due <a> distinti, stesso href - vedi wrap_spotlight_items) */
.spotlight-title {
    display: block;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-heading-1);
}

.spotlight-title:hover {
    text-decoration: underline;
}

.spotlight-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--color-text);
}

/* elenco di link dentro una card (es. "Vicende storiche"/"Palazzo e
   giardino" di una villa): cliccabile, a differenza di .spotlight-text */
.spotlight-links {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.95rem;
    line-height: 1.45;
}

/* =========================
   SECTION BASE
========================= */

.section-block {
  margin-bottom: 1.5rem;
  padding: 0.5rem 0;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.2;
}

/* =========================
   CONTENT AREA (WRAP MODE)
========================= */

.section-content {
  display: block; /* fondamentale per float */
  font-size: 1rem;
  line-height: 1.6;
}

/* =========================
   THUMBNAIL FLOAT IMAGE
========================= */

.section-content p img {
  float: left;
  width: 180px;
  max-width: 100%;
  height: auto;

  margin: 0 1rem 0.75rem 0;

  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  object-fit: cover;
}

/* =========================
   LISTE
========================= */

.section-content ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}

.section-content li {
  flex: 1 1 45%;
  min-width: 45%;
  line-height: 1.6;
  padding-left: 0.9rem;
  position: relative;
}

.section-content li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

/* strong highlight */
.section-content li strong {
  display: inline-block;
  margin-bottom: 0.25rem;
}

/* =========================
   LINK
========================= */

.section-content a {
  color:var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}

.section-content a:hover {
  text-decoration: underline;
  color:var(--color-accent-hover);
}

/* =========================
   CLEAR FIX (IMPORTANT)
========================= */

.section-content::after {
  content: "";
  display: block;
  clear: both;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {
  .section-title {
    font-size: 1.25rem;
  }

  .page-article .figure-grid figure.figure-float {
    flex-basis: 100%;
    max-width: 100%;
  }

  /* su mobile le immagini oltre la prima non stanno piu' a fianco del testo:
     come la prima (figure-center) vanno al centro, a tutta larghezza
     (le immagini piu' piccole del contenitore restano alla loro larghezza) */
  .page-article figure.figure-float {
    float: none;
    max-width: 100%;
    margin: 2em auto;
    text-align: center;
  }

  .page-article figure.figure-float img {
    margin: 0 auto;
    width: 100%;
  }

  .page-article figure.figure-float figcaption {
    text-align: center;
  }

  /* miniature dei box section: su mobile piu' piccole, cosi' al testo
     a fianco resta piu' spazio (da desktop restano a 180px) */
  .section-content p img {
    width: 100px;
    margin: 0 0.75rem 0.5rem 0;
  }

  .section-thumb {
    float: none;
    display: block;
    width: 100%;
    margin: 0 0 1rem 0;
  }

  .site-header {
    padding: 1em;
    gap: 0.5em;
  }

  .site-title {
    font-size: 1.4em;
    word-break: break-word;
  }

  .nav-bar {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.5em 1em;
    gap: 0.5em;
  }

  .main-menu ul,
  .sub-menu ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em 1em;
  }
}

/* =========================
   RICERCA (Pagefind) - override dimensione testo risultati.
   pagefind-ui.css e' caricato DOPO questo foglio (nel body della pagina
   /search/, non nell'head), quindi a parita' di specificita' vincerebbe
   lui per ordine di sorgente - !important necessario per avere sempre
   la precedenza indipendentemente da questo
========================= */

.pagefind-ui__result-title {
    font-size: 1.15rem !important;
}

.pagefind-ui__result-excerpt {
    font-size: 1rem !important;
}