/* =============================================================================
   Il Cibernetico · personalizzazioni del tema Gazet (Bright Themes)
   -----------------------------------------------------------------------------
   Caricato da default.hbs subito dopo built/app.css. Non passa da Vite: dopo
   una modifica basta rifare lo zip, senza npm run build.
   Le regole non stanno in nessun @layer, quindi vincono sulle utility di
   Tailwind (che stanno in @layer utilities) senza bisogno di !important.
   Dove il tema usa classi come bg-brand o bg-brand!, invece di combatterle
   si ridefinisce localmente la variabile --color-brand.
   ============================================================================= */


/* 1. Caratteri self-hosted (nessuna richiesta a servizi terzi) ----------------
   EB Garamond (titoli, capolettera, data) e Newsreader (testo, il carattere di
   Gazet). File variabili Fontsource, licenza SIL OFL (vedi assets/fonts). */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/eb-garamond-latin-wght-normal.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;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/eb-garamond-latin-ext-wght-normal.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: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/eb-garamond-latin-wght-italic.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;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/eb-garamond-latin-ext-wght-italic.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: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-latin-wght-normal.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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-latin-ext-wght-normal.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: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-latin-wght-italic.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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-latin-ext-wght-italic.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;
}


/* 2. Palette e token ---------------------------------------------------------- */

:root {
  /* Contrasti calcolati sulla carta #D2E4DB (lo sfondo scelto in Ghost Admin) */
  --cib-carta: #D2E4DB;
  --cib-carta-scura: #C7DCD2;   /* riferimento: in pratica è calcolata sotto */
  --cib-bianco: #FFFFFF;
  --cib-nero: #111111;          /* 14,3:1 */
  --cib-verde: #287E55;         /* 3,8:1: solo come superficie (bottone newsletter, bianco sopra 5:1), mai testo */
  --cib-verde-scuro: #1E5E48;   /* 5,8:1: kicker, link, passaggi del mouse */
  --cib-verde-chiaro: #33A062;  /* solo su fondo nero */
  --cib-righe: #B5CFC3;         /* riferimento: in pratica è calcolata sotto */

  /* Token di Gazet. Sfondo, testo e filetti (--color-bgr, --color-typ,
     --color-brd) arrivano da Ghost Admin > Design. Carta scura e righe leggere
     si calcolano dallo sfondo scelto, scurendolo con il verde scuro (6% e 16%),
     così restano giuste anche se si cambia carta.
     Il colore "brand" del tema (kicker, link, passaggi del mouse) è il verde
     scuro; il verde pieno torna solo sul bottone della newsletter (sezione 4). */
  --color-brand: var(--cib-verde-scuro);
  --color-bgr-tone: color-mix(in srgb, var(--color-bgr) 94%, var(--cib-verde-scuro));
  --color-brd-soft: color-mix(in srgb, var(--color-bgr) 84%, var(--cib-verde-scuro));

  /* Altezza del logo (nel footer è ridefinita più piccola) */
  --logo-h-desktop: 72px;
  --logo-h-mobile: 40px;
}

body {
  --font-heading: var(--gh-font-heading, 'EB Garamond', Garamond, 'Times New Roman', serif);
  --font-body: var(--gh-font-body, 'Newsreader', Georgia, serif);
}

::selection {
  background-color: color-mix(in srgb, var(--cib-verde) 22%, var(--cib-carta));
  color: var(--cib-nero);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cib-verde-scuro);
  outline-offset: 2px;
}


/* 3. Testata ------------------------------------------------------------------ */

/* Area di rispetto: attorno al logo almeno l'altezza della "n" di "ibernetico",
   circa il 30% dell'altezza del logo (22px a 72px). */
@media (min-width: 48rem) {
  [data-header-top] {
    padding-block: 1.5rem 1.25rem;
  }

  /* Social e bottoni centrati sul logo, non sul blocco logo + data */
  [data-header-top] > [data-socials],
  [data-header-top] > [data-header-actions] {
    align-self: flex-start;
    height: var(--logo-h-desktop);
  }
}

/* Data del giorno sotto il logo, maiuscolo spaziato come il motto della testata */
[data-cib-date] {
  margin-top: 1.375rem;
  margin-right: -0.2em; /* compensa la spaziatura dopo l'ultima lettera */
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-typ);
}

/* Doppio filetto nero, spesso sopra e sottile sotto, come nelle testate
   storiche: sotto il logo e in cima al footer. */
[data-header-bottom],
[data-footer] > div:first-child {
  position: relative;
  border-top: 3px solid var(--color-brd);
}

[data-header-bottom]::before,
[data-footer] > div:first-child::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 2px;
  height: 1px;
  background-color: var(--color-brd);
}

[data-header-bottom] {
  padding-top: calc(0.5rem + 4px);
}

@media (min-width: 48rem) {
  [data-header-bottom] {
    padding-top: calc(0.625rem + 4px);
  }
}

/* Menu più arioso e, con il logo centrato, centrato anche lui */
[data-nav="header"] > ul {
  column-gap: 1.25rem;
}

[data-header]:has([data-header-top] > [data-socials]) [data-nav="header"] > ul {
  justify-content: center;
}


/* 4. Bottoni ------------------------------------------------------------------ */

/* Tutti i bottoni "brand" del tema: niente schiarimento al passaggio */
.bg-brand:hover,
.bg-brand\!:hover {
  filter: none;
}

/* Bottone della newsletter (box nella sidebar, paywall): l'unico in verde
   pieno, testo bianco (5:1); al passaggio verde scuro. La finestra di Portal
   usa l'accent color di Ghost Admin. */
form[data-members-form] button.bg-brand,
.gh-post-upgrade-cta .bg-brand\! {
  --color-brand: var(--cib-verde);
}

form[data-members-form] button.bg-brand:hover,
.gh-post-upgrade-cta .bg-brand\!:hover {
  --color-brand: var(--cib-verde-scuro);
}

/* "Abbonati" in header e menu: nero, al passaggio verde scuro */
[data-header-actions] a[href$="/signup/"],
[data-menu] a[href$="/signup/"] {
  --color-brand: var(--cib-nero);
  --color-brand-contrast: var(--cib-bianco);
}

[data-header-actions] a[href$="/signup/"]:hover,
[data-menu] a[href$="/signup/"]:hover {
  --color-brand: var(--cib-verde-scuro);
}

/* Moduli di iscrizione: campo bianco per staccare dalla carta, testo del
   bottone bianco pieno (il tema usa il colore della carta) */
form[data-members-form] fieldset.bg-bgr,
form[data-members-form] input.bg-bgr {
  background-color: var(--cib-bianco);
}

form[data-members-form] button.bg-brand {
  color: var(--cib-bianco);
}

/* Bottoni inseriti negli articoli (card "Button" di Ghost): neri */
.ghost-content .kg-button-card a.kg-btn-accent {
  background-color: var(--cib-nero);
  color: var(--cib-bianco);
}

.ghost-content .kg-button-card a.kg-btn-accent:hover {
  background-color: var(--cib-verde-scuro);
  opacity: 1;
}


/* 5. Kicker: il tag sopra i titoli -------------------------------------------- */

/* Verde scuro: 5,8:1 sulla carta e 5,3:1 sui box di carta scura */
[data-post-card-tags] a,
[data-post-tags] a {
  color: var(--cib-verde-scuro);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

[data-post-tags] a {
  font-size: 0.8125rem;
}

/* Autore e data sotto le card: Gazet li schiarisce due volte (75% x 75%) e
   sulla carta la data scende a 4:1. Con il contenitore all'85% arriva a 5,1:1. */
[data-post-card-meta="bottom"] {
  opacity: 0.85;
}

/* Data di pubblicazione negli articoli aggiornati: dal 60% al 75% (7,3:1) */
@media (min-width: 40rem) {
  [data-post-date="published"].sm\:opacity-60 {
    opacity: 0.75;
  }
}

/* "In primo piano" sull'articolo principale (tag interno #top-story): un kicker
   come gli altri, senza il riquadro verde inclinato di Gazet */
[data-top-story] {
  margin-left: 0;
  padding: 0;
  color: var(--cib-verde-scuro);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

[data-top-story]::before {
  display: none;
}


/* 6. Testo degli articoli ----------------------------------------------------- */

.prose {
  --tw-prose-links: var(--cib-verde-scuro);
  --tw-prose-quote-borders: var(--color-typ);
  /* Blocchi di codice: Gazet colora il testo con --color-typ-reverse, che non
     definisce mai, e il codice usciva nero su nero. Testo chiaro su nero (17:1). */
  --tw-prose-pre-bg: var(--cib-nero);
  --tw-prose-pre-code: #EEF5F1;
}

article.ghost-content pre {
  border-radius: 0;
}

/* "di" prima dell'autore sotto il titolo dell'articolo: era al limite (4,5:1) */
[data-post-authors] .opacity-75 {
  opacity: 0.9;
}

/* Link: verde scuro, sottolineatura sottile e tenue; al passaggio la
   sottolineatura diventa piena. Il verde pieno come testo sulla carta
   #D2E4DB scenderebbe a 3,8:1. */
article.ghost-content a:not([class*="kg-"], [class*="btn"]) {
  color: var(--cib-verde-scuro);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

article.ghost-content a:not([class*="kg-"], [class*="btn"]):hover {
  color: var(--cib-verde-scuro);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* Citazioni: filetto nero sottile invece della barra colorata */
article.ghost-content blockquote:not([class]) {
  border-inline-start-width: 2px;
}

/* Capolettera in EB Garamond bold, come la C del logo, alto tre righe: la
   cima della lettera sta sulle maiuscole della prima riga, la base sulla linea
   di base della terza. Calcolato su interlinea 1,6 (quella di Gazet) e sulle
   metriche di EB Garamond (maiuscole 0,65, ascendente 1,007, discendente 0,298):
   corpo (2 x 1,6 + 0,67) / 0,65 = 5,95em, interlinea 0,713. */
body[data-dropcap] .ghost-content:not(.no-dropcap) > p:first-of-type::first-letter {
  font-family: 'EB Garamond', Garamond, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 5.95em;
  line-height: 0.713;
  margin: 0 0.07em 0 -0.02em;
  color: var(--color-typ);
}


/* 7. Ingranaggino ------------------------------------------------------------- */

/* Segno di fine articolo, subito dopo l'ultima parola, grande come un punto.
   Non compare sulle anteprime troncate dal paywall. */
.post-template article.ghost-content:not([data-preview]) > p:last-of-type::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.35em;
  background: url('../images/ingranaggino-verde.svg') center / contain no-repeat;
}

/* Elenchi puntati delle pagine statiche (Chi siamo, ecc.) */
.page-template article.ghost-content > ul,
.page-template article.ghost-content > ul li > ul {
  list-style: none;
}

.page-template article.ghost-content > ul > li,
.page-template article.ghost-content > ul li > ul > li {
  position: relative;
}

.page-template article.ghost-content > ul > li::before,
.page-template article.ghost-content > ul li > ul > li::before {
  content: "";
  position: absolute;
  left: -0.65em;
  top: 0.62em;
  top: calc(0.5lh - 0.26em);
  width: 0.42em;
  height: 0.42em;
  background: url('../images/ingranaggino-verde.svg') center / contain no-repeat;
}


/* Schede autore (pagina Autori e "I nostri autori" in home): Gazet dà alla
   colonna foto + bio la classe flex-1.5, che Tailwind non genera, e la colonna
   si stringeva con le bio corte disallineando gli articoli accanto. Larghezza
   fissa: foto 5rem + spazio 0.75rem + bio 20rem. */
@media (min-width: 40rem) {
  [data-author] > .flex-1\.5 {
    flex: 0 0 25.75rem;
  }
}


/* 8. Immagini delle card: niente ombre né angoli, filetto leggero ------------
   Il filetto sta fuori dall'immagine: stacca dalla carta le foto chiare e
   sparisce accanto a quelle scure. */

[data-post-card] figure {
  border-radius: 0;
  box-shadow: none;
  outline: 1px solid var(--color-brd-soft);
  outline-offset: 0;
}


/* 9. Barra di lettura: un filetto verde, non una fascia ----------------------- */

[data-progress-bar] {
  height: 3px;
}

[data-progress-bar]::-webkit-progress-value {
  background: var(--cib-verde);
}

[data-progress-bar]::-moz-progress-bar {
  background: var(--cib-verde);
}


/* 10. Footer chiaro: stesso sfondo della pagina, logo a colori, dettagli in verde scuro */

[data-footer] {
  --logo-h-desktop: 52px;
  --logo-h-mobile: 36px;
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
}

/* Menu secondario vuoto (Settings > Navigation): niente fascia vuota nel footer
   e niente filetto doppio tra logo e note legali */
[data-footer] > div > div:has([data-nav="secondary"]):not(:has([data-nav="secondary"] li)) {
  display: none;
}

[data-footer] > div > div:has([data-nav="secondary"]):not(:has([data-nav="secondary"] li)) + div {
  border-top-width: 0;
}

/* Note legali della testata, in fondo al footer */
[data-cib-legal] {
  line-height: 1.5;
  color: var(--color-typ-tone);
}

* + [data-cib-legal] {
  margin-top: 0.5rem;
}

[data-cib-legal] a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

[data-cib-legal] a:hover {
  color: var(--color-brand);
}