/* ===========================================================================
   L'IDENTITA' DI LYRANTIS, IN UN FILE SOLO
   ===========================================================================

   Questo file NON disegna niente: dichiara le misure e i colori decisi in
   brand/00-identita.md. Tutto il resto dell'interfaccia li usa e non ne
   inventa altri. Se un giorno cambia il marchio o cambia una proporzione, si
   cambia qui e cambia dappertutto insieme.

   IL PROBLEMA CHE RISOLVE. Un marchio messo accanto a un testo "a occhio" e'
   sbagliato quasi sempre, e si vede: o galleggia troppo grande, o sparisce.
   La ragione e' che dentro il marchio la scritta LYRANTIS occupa solo il 43%
   dell'altezza totale - il resto sono le onde, che salgono e scendono. Quindi
   un marchio alto 24 px ha lettere alte circa 10, e accanto a un testo da 15 px
   sembra piccolo, anche se il numero 24 e' piu' grande di 15.

   LA REGOLA, allora, e' una sola: si parte dall'altezza delle LETTERE che si
   vogliono, e si ricava l'altezza del marchio dividendo per 0,43.

   ===========================================================================
   Le costanti che vengono dal marchio, e non si toccano a mano
   =========================================================================== */

:root {
  /* Rapporti larghezza/altezza, letti dal viewBox dei file SVG.
     Servono per dare a ogni immagine la sua larghezza esatta: senza, il
     browser riserva lo spazio sbagliato e la pagina "salta" mentre carica. */
  --rapporto-logo-lyrantis:     5.6021;  /* 560.21 x 100 - onde + scritta   */
  --rapporto-marchio-lyrantis:  2.4977;  /* 249.77 x 100 - solo le onde     */
  --rapporto-logo-vega:         3.3615;  /* 336.15 x 100 - ramo + scritta   */
  --rapporto-marchio-vega:      1.1465;  /* 114.65 x 100 - solo il ramo     */

  /* Le proporzioni decise (brand/00-identita.md §3 e §4). */
  --scritta-nel-marchio: 0.43;  /* LYRANTIS e' il 43% dell'altezza totale   */
  --scritta-nel-vega:    0.70;  /* Vega e' il 70% del suo                   */
  --vega-accanto-a-lyrantis: 0.51; /* insieme, Vega e' il 51% di Lyrantis   */

  /* ------------------------------------------------------------------- */
  /* L'UNICA MANOPOLA: quanto devono essere alte le lettere del marchio    */
  /* nei due posti dove compare. Tutto il resto scende da qui.             */
  /* ------------------------------------------------------------------- */

  /* Nella barra in alto sta accanto al nome della persona (13 px). Le sue
     lettere vanno un filo piu' alte del testo, non piu' basse: e' un marchio,
     deve reggere la riga. */
  --lettere-marchio-barra: 11px;

  /* Sulla carta d'ingresso sta sopra un titolo da 25 px ed e' la prima cosa
     che si vede: le lettere vanno vicine al titolo, non sopra di lui. */
  --lettere-marchio-ingresso: 18px;

  /* Da cui discendono le altezze vere dei due marchi. */
  --marchio-barra:    calc(var(--lettere-marchio-barra)    / var(--scritta-nel-marchio));
  --marchio-ingresso: calc(var(--lettere-marchio-ingresso) / var(--scritta-nel-marchio));

  /* E le larghezze, che non si scelgono: sono conseguenza del rapporto. */
  --largo-marchio-barra:    calc(var(--marchio-barra)    * var(--rapporto-logo-lyrantis));
  --largo-marchio-ingresso: calc(var(--marchio-ingresso) * var(--rapporto-logo-lyrantis));

  /* Vega, dove Vega c'e' davvero. Non si sceglie: e' il 51% di Lyrantis. */
  --marchio-vega:       calc(var(--marchio-barra) * var(--vega-accanto-a-lyrantis));
  --largo-marchio-vega: calc(var(--marchio-vega) * var(--rapporto-logo-vega));

  /* Aria attorno al marchio. Il documento dice 24% dell'altezza fra segno e
     scritta; fuori dal marchio si tiene almeno altrettanto, se no il marchio
     tocca le cose che ha accanto e smette di essere un marchio. */
  --aria-marchio-barra:    calc(var(--marchio-barra) * 0.24);
  --aria-marchio-ingresso: calc(var(--marchio-ingresso) * 0.24);
}

/* Sugli schermi stretti si rimpicciolisce UNA cosa sola - le lettere - e tutto
   il resto si ricalcola da se'. E' il motivo per cui questo file esiste. */
@media (max-width: 460px) {
  :root {
    --lettere-marchio-barra: 9px;
    --lettere-marchio-ingresso: 15px;
  }
}

/* ===========================================================================
   Come si mette in pagina
   ===========================================================================
   Sempre con larghezza E altezza dichiarate, cosi' il posto e' gia' pronto
   prima che l'immagine arrivi e la pagina non si muove sotto le dita. */

.logo-grande {
  display: block;
  height: var(--marchio-ingresso);
  width:  var(--largo-marchio-ingresso);
  max-width: 100%;
  margin-bottom: var(--aria-marchio-ingresso);
}

.logo-barra {
  display: block; flex: none;
  height: var(--marchio-barra);
  width:  var(--largo-marchio-barra);
  margin-right: var(--aria-marchio-barra);
}

/* Solo dove si puo' parlare con Vega: il pulsante dell'assistente, il
   pannello, le risposte. Mai al posto del marchio Lyrantis. */
.logo-vega {
  display: block; flex: none;
  height: var(--marchio-vega);
  width:  var(--largo-marchio-vega);
}

/* Il marchio senza scritta: per le icone piccole e i posti stretti. Qui la
   regola del 43% non vale, perche' la scritta non c'e': si va ad altezza. */
.marchio-solo {
  display: block; flex: none;
  height: var(--marchio-barra);
  width:  calc(var(--marchio-barra) * var(--rapporto-marchio-lyrantis));
}