/*
Theme Name: Consenso di Ginevra
Template: generatepress
Description: Tema figlio di GeneratePress per consensodiginevra.it
Version: 1.0
*/


  :root {
    --fondo:        #E8EDEA;
    --fondo-alt:    #DCE5E0;
    --superficie:   #F2F5F3;
    --inchiostro:   #17241F;
    --inchiostro-2: #4A6259;
    --eucalipto:    #4F7A6B;
    --eucalipto-2:  #35594C;
    --ottone:       #A8853F;
    --filo:         rgba(23,36,31,.14);
    --velo:         rgba(19,32,27,.40);

    --sp: clamp(1.1rem, .6rem + 1.6vw, 2rem);
    --misura: 34rem;
    --foto: url("assets/palazzo-nazioni.jpg");
    --foto: image-set(url("assets/palazzo-nazioni.webp") type("image/webp"), url("assets/palazzo-nazioni.jpg") type("image/jpeg"));
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --fondo:        #121A17;
      --fondo-alt:    #1B2622;
      --superficie:   #1B2622;
      --inchiostro:   #E2E9E5;
      --inchiostro-2: #9DB3AA;
      --eucalipto:    #83AC9C;
      --eucalipto-2:  #A8C8BB;
      --ottone:       #C9A65E;
      --filo:         rgba(226,233,229,.16);
      --velo:         rgba(8,14,12,.54);
    }
  }
  :root[data-theme="dark"] {
    --fondo:        #121A17;
    --fondo-alt:    #1B2622;
    --superficie:   #1B2622;
    --inchiostro:   #E2E9E5;
    --inchiostro-2: #9DB3AA;
    --eucalipto:    #83AC9C;
    --eucalipto-2:  #A8C8BB;
    --ottone:       #C9A65E;
    --filo:         rgba(226,233,229,.16);
    --velo:         rgba(8,14,12,.54);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--fondo);
    color: var(--inchiostro);
    font-family: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1.0625rem;
    line-height: 1.68;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, .display {
    font-family: Newsreader, ui-serif, Georgia, "Times New Roman", serif;
    font-weight: 400;
    text-wrap: balance;
    letter-spacing: -.012em;
  }

  a { color: inherit; }

  .etichetta {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--eucalipto);
  }

  .guscio {
    width: min(100% - 2 * var(--sp), 66rem);
    margin-inline: auto;
  }
  .stretto { max-width: var(--misura); }

  /* ---------- barra di navigazione ---------- */

  .barra {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sp);
    padding: .85rem var(--sp);
    background: color-mix(in srgb, var(--fondo) 88%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--filo);
  }
  .marchio {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: Newsreader, serif;
    font-size: 1.0625rem;
    letter-spacing: -.01em;
    text-decoration: none;
  }
  .marchio svg { flex: none; }
  .menu {
    display: flex;
    gap: 1.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .875rem;
  }
  .menu a {
    text-decoration: none;
    color: var(--inchiostro-2);
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: color .18s, border-color .18s;
  }
  .menu a:hover { color: var(--inchiostro); border-bottom-color: var(--eucalipto); }
  .barra-azione { justify-self: end; }

  .bottone {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .58rem 1.15rem;
    border-radius: 999px;
    border: 1px solid var(--eucalipto);
    background: var(--eucalipto);
    color: #F4F8F6;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s, border-color .18s, transform .18s;
  }
  .bottone:hover { background: var(--eucalipto-2); border-color: var(--eucalipto-2); transform: translateY(-1px); }
  :root[data-theme="dark"] .bottone,
  .bottone { color: #F4F8F6; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bottone { color: #0E1613; }
  }
  :root[data-theme="dark"] .bottone { color: #0E1613; }

  .bottone.vuoto {
    background: transparent;
    color: var(--inchiostro);
    border-color: var(--filo);
  }
  .bottone.vuoto:hover { background: transparent; border-color: var(--eucalipto); }

  .bottone.chiaro {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.42);
    color: #F2F6F4;
    backdrop-filter: blur(6px);
  }
  .bottone.chiaro:hover { background: rgba(255,255,255,.2); border-color: #fff; }

  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--ottone);
    outline-offset: 3px;
  }

  /* ---------- apertura ---------- */

  .apertura {
    position: relative;
    min-height: min(88svh, 50rem);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 4.2rem var(--sp) 3rem;
    overflow: hidden;
    isolation: isolate;
  }
  .apertura .sfondo {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--foto);
    background-size: cover;
    background-position: center 42%;
    transform: scale(1.06);
    transition: transform 1.2s cubic-bezier(.2,.7,.3,1);
  }
  .apertura .sfondo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom, rgba(15,26,22,.34) 0%, rgba(15,26,22,.20) 32%, rgba(15,26,22,.78) 100%),
      linear-gradient(to bottom, var(--velo), var(--velo));
  }

  .apertura-corpo { max-width: 52rem; display: grid; gap: 1.15rem; justify-items: center; }

  .sigillo { display: block; }

  .apertura h1 {
    margin: 0;
    color: #F4F8F6;
    font-size: clamp(2.15rem, 1.2rem + 3.5vw, 3.9rem);
    line-height: 1.02;
    letter-spacing: -.028em;
    text-shadow: 0 2px 26px rgba(10,20,16,.5);
  }
  .apertura h1 em {
    font-style: italic;
    font-weight: 300;
    color: #CFE0D8;
  }
  .apertura p.sottotitolo {
    margin: 0;
    max-width: 37rem;
    color: rgba(240,246,243,.88);
    font-size: clamp(1.02rem, .95rem + .35vw, 1.19rem);
    line-height: 1.6;
    font-weight: 300;
  }
  .apertura .etichetta { color: #A9CFBF; }

  .azioni { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }

  /* elemento jolly: i dati */
  .dati {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    margin-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.24);
    padding-top: 1.1rem;
  }
  .dati div {
    padding: 0 clamp(.9rem, 2.6vw, 2rem);
    border-right: 1px solid rgba(255,255,255,.16);
  }
  .dati div:last-child { border-right: 0; }
  .dati b {
    display: block;
    font-family: Newsreader, serif;
    font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.1rem);
    font-weight: 400;
    line-height: 1.1;
    color: #F4F8F6;
    font-variant-numeric: tabular-nums;
  }
  .dati span {
    display: block;
    margin-top: .2rem;
    font-size: .69rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(215,232,224,.72);
  }

  .freccia {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    translate: -50% 0;
    color: rgba(235,244,240,.55);
    animation: respiro 2.6s ease-in-out infinite;
  }
  @keyframes respiro {
    0%, 100% { transform: translateY(0);     opacity: .45; }
    50%      { transform: translateY(7px);   opacity: .95; }
  }

  /* ---------- sezioni ---------- */

  section { padding: clamp(3.6rem, 2rem + 5vw, 6.5rem) 0; }
  .alt { background: var(--fondo-alt); }

  .testa { display: grid; gap: .85rem; margin-bottom: 2.6rem; max-width: 40rem; }
  .testa h2 {
    margin: 0;
    font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.5rem);
    line-height: 1.12;
  }
  .testa p { margin: 0; color: var(--inchiostro-2); }

  .prosa p { margin: 0 0 1.15rem; }
  .prosa p:last-child { margin-bottom: 0; }
  .prosa .occhiello {
    font-family: Newsreader, serif;
    font-size: 1.32rem;
    line-height: 1.5;
    font-weight: 300;
  }

  .citazione {
    margin: 2.4rem 0 0;
    padding: 1.5rem 0 1.5rem 1.6rem;
    border-left: 2px solid var(--ottone);
    font-family: Newsreader, serif;
    font-size: 1.28rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.52;
  }
  .citazione footer {
    margin-top: .9rem;
    font-family: "Public Sans", sans-serif;
    font-style: normal;
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--inchiostro-2);
  }

  /* ---------- cronologia ---------- */

  .cronologia { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
  .cronologia li {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: clamp(1rem, 3vw, 2.4rem);
    padding: 1.5rem 0;
    border-top: 1px solid var(--filo);
  }
  .cronologia li:last-child { border-bottom: 1px solid var(--filo); }
  .cronologia time {
    font-family: Newsreader, serif;
    font-size: 1.05rem;
    color: var(--ottone);
    font-variant-numeric: tabular-nums;
    padding-top: .1rem;
  }
  .cronologia h3 { margin: 0 0 .3rem; font-size: 1.16rem; }
  .cronologia p { margin: 0; color: var(--inchiostro-2); font-size: .95rem; }

  /* ---------- firmatari ---------- */

  .paesi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .4rem 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .paesi li {
    padding: .55rem 0;
    border-bottom: 1px solid var(--filo);
    font-size: .95rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
  }
  .paesi .uscito { color: var(--inchiostro-2); }
  .paesi .stato {
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ottone);
  }

  .nota-lista {
    margin-top: 1.8rem;
    padding: 1rem 1.2rem;
    border: 1px dashed var(--filo);
    border-radius: 3px;
    font-size: .88rem;
    color: var(--inchiostro-2);
    background: var(--superficie);
  }



  .bottone.daFare {
    cursor: not-allowed;
    opacity: .5;
    position: relative;
  }
  .bottone.daFare::after {
    content: "da fare";
    position: absolute;
    top: -.55rem; right: -.4rem;
    padding: .05rem .38rem;
    border-radius: 999px;
    background: var(--ottone);
    color: #14100A;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .daFare-nota {
    margin: 1rem 0 0;
    font-size: .82rem;
    color: var(--inchiostro-2);
    max-width: 30rem;
  }

  /* ---------- carta dei firmatari ---------- */
  .tavola { margin: 0 0 2.8rem; }
  .mappa {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .mappa path, .mappa circle {
    stroke: var(--fondo);
    stroke-width: .9;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: fill .2s;
  }
  .mappa .n { fill: color-mix(in srgb, var(--inchiostro) 13%, var(--fondo)); }
  .mappa .f { fill: var(--eucalipto); }
  .mappa .u { fill: color-mix(in srgb, var(--ottone) 55%, var(--fondo)); }
  .mappa .f:hover, .mappa .u:hover { fill: var(--ottone); }
  .mappa .punto { stroke-width: 1.6; }
  .alt .mappa path, .alt .mappa circle { stroke: var(--fondo-alt); }
  .alt .mappa .n { fill: color-mix(in srgb, var(--inchiostro) 13%, var(--fondo-alt)); }

  .tavola figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--filo);
    font-size: .8rem;
    color: var(--inchiostro-2);
  }
  .chiave { display: inline-flex; align-items: center; gap: .5rem; }
  .chiave i { width: .78rem; height: .78rem; border-radius: 2px; display: inline-block; }
  .chiave .q-f { background: var(--eucalipto); }
  .chiave .q-u { background: color-mix(in srgb, var(--ottone) 55%, var(--fondo-alt)); }
  .nota-fig { margin-left: auto; font-size: .76rem; opacity: .85; }
  @media (max-width: 46rem) { .nota-fig { margin-left: 0; } }


  /* ---------- pilastri ---------- */
  .pilastri { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem,1fr)); gap: 1px;
    background: var(--filo); border: 1px solid var(--filo); }
  .pilastri article { background: var(--fondo); padding: clamp(1.3rem,3vw,1.9rem); }
  .alt .pilastri article { background: var(--fondo-alt); }
  .pilastri h3 { margin: 0 0 .55rem; font-size: 1.18rem; color: var(--eucalipto-2); }
  .pilastri p { margin: 0; font-size: .93rem; color: var(--inchiostro-2); }

  /* ---------- pergamena ---------- */
  .pergamena { background: var(--superficie); border: 1px solid var(--filo);
    padding: clamp(1.6rem,4.5vw,3.4rem); box-shadow: 0 14px 44px -26px rgba(23,36,31,.45); }
  .pergamena > header { text-align: center; padding-bottom: 1.6rem; margin-bottom: 1.8rem;
    border-bottom: 1px solid var(--filo); }
  .pergamena > header h3 { margin: 0 0 .35rem; font-size: clamp(1.3rem,1.1rem+.9vw,1.75rem); }
  .pergamena > header p { margin: 0; font-size: .93rem; color: var(--inchiostro-2); font-style: italic; }
  .pergamena .preambolo { max-width: var(--misura); margin: 0 auto 1.6rem; font-size: .97rem; }
  .clausole { max-width: var(--misura); margin: 0 auto 1.8rem; padding: 0; list-style: none; counter-reset: c; }
  .clausole li { counter-increment: c; position: relative; padding: .8rem 0 .8rem 2.4rem;
    border-top: 1px solid var(--filo); font-size: .95rem; }
  .clausole li::before { content: counter(c); position: absolute; left: 0; top: .95rem;
    font-family: Newsreader, serif; font-size: .95rem; color: var(--ottone);
    font-variant-numeric: tabular-nums; }
  .pergamena > footer { max-width: var(--misura); margin: 0 auto; padding-top: 1.2rem;
    border-top: 1px solid var(--filo); font-size: .8rem; color: var(--inchiostro-2); }

  /* ---------- appello ---------- */
  .appello-corpo { display: flex; flex-wrap: wrap; gap: 2.4rem; align-items: center; }
  .contatore { padding-right: 2.4rem; border-right: 1px solid var(--filo); }
  .contatore b { display: block; font-family: Newsreader, serif; font-size: clamp(2.4rem,2rem+2vw,3.4rem);
    line-height: 1; color: var(--eucalipto-2); font-variant-numeric: tabular-nums; }
  .contatore span { display: block; margin-top: .4rem; font-size: .7rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--inchiostro-2); }
  @media (max-width: 40rem) { .contatore { border-right: 0; padding-right: 0; } }

  /* ---------- risorse ---------- */
  .risorse { display: grid; grid-template-columns: repeat(auto-fill,minmax(17rem,1fr));
    gap: 0 2.4rem; margin: 0; padding: 0; list-style: none; }
  .risorse li { padding: .95rem 0; border-top: 1px solid var(--filo); }
  .risorse b { display: block; font-weight: 500; font-size: .97rem; }
  .risorse span { display: block; margin-top: .2rem; font-size: .85rem; color: var(--inchiostro-2); }

  /* ---------- documento ---------- */

  .documento {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
    align-items: center;
  }
  @media (min-width: 54rem) {
    .documento { grid-template-columns: 1fr 1fr; gap: 4rem; }
  }
  .foglio {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--filo);
    padding: clamp(1.6rem, 4vw, 2.8rem);
    display: grid;
    gap: .75rem;
    box-shadow: 0 1px 2px rgba(23,36,31,.05), 0 14px 40px -22px rgba(23,36,31,.4);
  }
  .foglio .riga { height: 1px; background: var(--filo); }
  .foglio .riga.corta { width: 62%; }
  .foglio .riga.media { width: 84%; }
  .foglio h3 {
    margin: 0 0 .4rem;
    font-size: 1.3rem;
    line-height: 1.25;
  }
  .foglio .timbro {
    position: absolute;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    opacity: .5;
  }

  /* ---------- chiusura ---------- */

  footer.piede {
    padding: 3.4rem 0 2.6rem;
    border-top: 1px solid var(--filo);
    font-size: .85rem;
    color: var(--inchiostro-2);
  }
  .piede-griglia {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    justify-content: space-between;
    align-items: flex-start;
  }
  .piede a { color: var(--eucalipto); text-decoration-thickness: 1px; text-underline-offset: 3px; }

  .avviso {
    margin-top: 2.4rem;
    padding: .95rem 1.15rem;
    background: color-mix(in srgb, var(--ottone) 12%, var(--fondo));
    border-left: 3px solid var(--ottone);
    font-size: .82rem;
    line-height: 1.55;
    color: var(--inchiostro);
  }

  /* ---------- entrata ---------- */

  .js .entra { opacity: 0; filter: blur(9px); transform: translateY(14px); }
  .js.pronto .entra {
    opacity: 1;
    filter: blur(0);
    transform: none;
    transition: opacity .85s ease, filter .85s ease, transform .85s cubic-bezier(.2,.7,.3,1);
  }
  .js.pronto .entra:nth-child(1) { transition-delay: .05s; }
  .js.pronto .entra:nth-child(2) { transition-delay: .16s; }
  .js.pronto .entra:nth-child(3) { transition-delay: .27s; }
  .js.pronto .entra:nth-child(4) { transition-delay: .38s; }
  .js.pronto .entra:nth-child(5) { transition-delay: .49s; }
  .js.pronto .sfondo { transform: scale(1); }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .entra { opacity: 1; filter: none; transform: none; }
    .apertura .sfondo { transform: scale(1); }
  }

  @media (max-width: 46rem) {
    .barra { grid-template-columns: 1fr auto; }
    .menu { display: none; }
    .cronologia li { grid-template-columns: 1fr; gap: .35rem; }
  }

  /* ---------- richiamo alla petizione ---------- */
  .richiamo {
    margin: 2.4rem 0 0;
    padding: clamp(1.4rem, 3.5vw, 2rem);
    background: var(--superficie);
    border: 1px solid var(--filo);
    border-left: 3px solid var(--ottone);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
  }
  .richiamo > div { flex: 1 1 20rem; }
  .richiamo h3 { margin: .5rem 0 .6rem; font-size: 1.3rem; }
  .richiamo p:last-of-type { margin: 0; font-size: .93rem; color: var(--inchiostro-2); }

  .risorse a { color: inherit; text-decoration: none; }
  .risorse a b { border-bottom: 1px solid var(--eucalipto); padding-bottom: 1px; transition: color .18s; }
  .risorse a:hover b { color: var(--eucalipto); }
  .risorse a::after { content: " ↗"; font-size: .78em; color: var(--eucalipto); }