/* ==========================================================
   style.css — ASPETTO (colori, forme, ombre, tipografia)
   La struttura (flex, dimensioni, spaziature) sta in design.css
   ========================================================== */

@font-face {
  font-family: "UbuntuMono";
  src:
    /* look for the font on the client device */
    local("UbuntuMono Nerd Font"),
    /* download it from server if it fails */
    url("../fonts/UbuntuMonoNerdFont-Regular.woff2") format("woff2"),
    url("../fonts/UbuntuMonoNerdFont-Regular.ttf") format("truetype");
  /* mostra subito il testo con un font di riserva, poi lo sostituisce */
  font-display: swap;
}

/* ---------- Palette: i colori si definiscono una volta sola ---------- */
:root {
  /* solo i tre canali RGB, così posso scegliere la trasparenza ogni volta */
  --green: 47 168 50;
  --blue: 15 22 226;
  --teal: 46 184 184;

  --text: #f1f4f8;
  --text-soft: rgb(241 244 248 / 70%);
  --panel: rgb(22 22 28 / 62%);
  --line: rgb(255 255 255 / 14%);

  --radius-lg: 25px;
  --radius: 14px;
  --shadow: 0 12px 32px rgb(0 0 0 / 45%);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "UbuntuMono", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  line-height: 1.5;
  /* Impostazioni del background */
  background-color: #1a1412;     /* colore di riserva mentre l'immagine carica */
  background-image:
    /* velo scuro sopra la foto: i pannelli si leggono meglio */
    linear-gradient(rgb(0 0 0 / 25%), rgb(0 0 0 / 45%)),
    url("../images/backgrounds/volcano.jpg");
  background-size: cover;        /* copre tutto lo schermo */
  background-position: center;   /* centra l'immagine */
  background-repeat: no-repeat;  /* evita che si ripeta */
  background-attachment: fixed;  /* opzionale: effetto parallax */
}

a {
  color: inherit;
  text-decoration: none;
}

/* contorno visibile solo quando si naviga con la tastiera (Tab) */
a:focus-visible {
  outline: 2px solid rgb(var(--teal));
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Header ---------- */
header {
  margin: 10px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    110deg,
    rgb(var(--green) / 85%) 42%,
    rgb(var(--blue) / 85%) 92%
  );
  box-shadow: var(--shadow);
  /* sottile riflesso in alto, dà spessore al "vetro" */
  border-top: 1px solid rgb(255 255 255 / 25%);
}

.banner img {
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / 40%));
}

.banner h1 {
  /* cresce con la finestra ma resta tra 1.6rem e 2.8rem */
  font-size: clamp(1.6rem, 4.5vw, 2.8rem);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgb(0 0 0 / 45%);
}

.nav-pannel a {
  display: inline-block;
  padding: 0.35rem 1.1rem;
  border-radius: 999px;          /* forma a "pillola" */
  background-color: rgb(255 255 255 / 14%);
  border: 1px solid rgb(255 255 255 / 22%);
  transition: background-color 0.2s, transform 0.2s;
}

.nav-pannel a:hover {
  background-color: rgb(255 255 255 / 28%);
  transform: translateY(-2px);
}

/* ---------- Blocchi dei servizi ---------- */
.dash-block {
  background-color: var(--panel);
  /* sfoca la foto dietro il pannello (effetto vetro smerigliato) */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  /* striscia colorata in cima: il colore lo decide la categoria */
  border-top: 4px solid rgb(var(--accent, var(--teal)));
  box-shadow: var(--shadow);
}

/* ogni categoria imposta solo la sua variabile --accent */
#cloud     { --accent: var(--green); }
#sicurezza { --accent: var(--blue); }

.dash-block h2 {
  padding-bottom: 0.6rem;
  font-size: 1.3rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}

.service-block {
  background-color: rgb(var(--accent) / 18%);
  border: 1px solid rgb(var(--accent) / 45%);
  border-radius: 10px;
  transition: transform 0.2s, background-color 0.2s, border-color 0.2s;
}

.service-block:hover {
  background-color: rgb(var(--accent) / 32%);
  border-color: rgb(255 255 255 / 55%);
  transform: translateX(6px);
}

/* "piastrella" chiara dietro le icone: anche quelle nere (Vaultwarden) restano visibili */
.service-block img {
  padding: 4px;
  border-radius: 10px;
  background-color: rgb(255 255 255 / 88%);
  box-shadow: 0 2px 6px rgb(0 0 0 / 35%);
}

.service-block h3 {
  font-size: 1.2rem;
  font-weight: normal;
}

/* ---------- Footer ---------- */
footer {
  background-color: rgb(var(--teal));
  color: #0e1a24;                 /* testo scuro: sul turchese si legge meglio del bianco */
}

.company {
  border-bottom: 1px solid #2f2b4b;
}

.motto {
  font-style: italic;
}

.signature {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* ---------- Accessibilità e dispositivi ---------- */

/* chi ha disattivato le animazioni nel sistema non le vede */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* su telefono "fixed" è pesante o non funziona (iOS): lo disattivo */
@media (max-width: 600px) {
  body { background-attachment: scroll; }
}