/*
 * Il vestito Delos per la pagina di accesso — stessi materiali della
 * piattaforma: Montserrat, blu #0367AF, ciano #00AFCB, misurati da
 * www.delospower.com. I font sono gli stessi woff2 auto-ospitati della SPA:
 * questa pagina passa dallo stesso Caddy e dalla stessa CSP, e non deve
 * chiedere niente a nessuno.
 *
 * Solo CSS sopra keycloak.v2: niente selettori inventati — #kc-header-wrapper,
 * #kc-page-title e le classi PatternFly v5 vengono dal template del padre,
 * letto dal jar del contenitore vero prima di scrivere questo file.
 */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-300.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

:root {
  --delos-blu: #0367af;
  --delos-blu-scuro: #02528c;
  --delos-ciano: #00afcb;
  --delos-inchiostro: #1f211c;
  --delos-fondo: #f5f8fa;
  --delos-filo: #dce3e9;
  --delos-spento: #79828b;

  /* Il blu del marchio guida anche i componenti PatternFly. */
  --pf-v5-global--primary-color--100: var(--delos-blu);
  --pf-v5-global--primary-color--200: var(--delos-blu-scuro);
  --pf-v5-global--link--Color: var(--delos-blu);
  --pf-v5-global--link--Color--hover: var(--delos-blu-scuro);
  --pf-v5-global--FontFamily--text: "Montserrat", Arial, Helvetica, sans-serif;
  --pf-v5-global--FontFamily--heading: "Montserrat", Arial, Helvetica, sans-serif;
}

/* Via lo sfondo scuro a poligoni: il marchio Delos e' chiaro. */
body#keycloak-bg,
.pf-v5-c-login {
  background: linear-gradient(160deg, #ffffff 0%, var(--delos-fondo) 55%, #e8f1f8 100%);
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

/* Il marchio sopra la carta e' il solo logo: per ordine di Andrea (15/8) in
   testata non c'e' piu' nessuna avvertenza — l'ambiente si dichiara nel
   disclaimer discreto SOTTO la carta, piu' giu' in questo file. */
#kc-header::before {
  content: "";
  display: block;
  width: 240px;
  height: 62px;
  margin: 0 auto 10px;
  background: url("../img/logo-delospower.png") center / contain no-repeat;
}

#kc-header-wrapper.pf-v5-c-brand {
  /* Il nome del realm («Delos») resta per chi legge con lo screen reader —
     e' il nome della pagina — ma non si mostra: il logo qui sopra E' il
     marchio, e due insegne una sotto l'altra sono una di troppo. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Il disclaimer d'ambiente: discreto e SOTTO la carta (ordine di Andrea,
   15/8, al posto della scritta in testata). Il testo vive nel CSS perche' il
   tema non sovrascrive template e il realm e' a lingua unica; se un giorno
   servisse tradurlo, la strada e' un template o una chiave di messaggio. */
.pf-v5-c-login__container::after {
  content: "Ambiente di sviluppo — dati e identità sintetici.";
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--delos-spento);
}

/* Il claim: il titolo della carta, nel blu e nel peso dei titoli del sito. */
h1#kc-page-title {
  color: var(--delos-blu);
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* La carta si stacca dal fondo chiaro con un filo e un'ombra breve, non col
   contrasto col buio che non c'e' piu'. */
.pf-v5-c-login__main {
  border: 1px solid var(--delos-filo);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(3, 103, 175, 0.1);
}

.pf-v5-c-button.pf-m-primary {
  background-color: var(--delos-blu);
  border-radius: 999px;
  font-weight: 700;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
  background-color: var(--delos-blu-scuro);
}

:focus-visible {
  outline: 2.5px solid var(--delos-ciano);
  outline-offset: 2px;
}