/*
  /$$$$$$  /$$   /$$ /$$      /$$  /$$$$$$  /$$$$$$$$ /$$$$$$$$ /$$   /$$
 /$$__  $$| $$  | $$| $$$    /$$$ /$$__  $$|__  $$__/| $$_____/| $$  / $$
| $$  \ $$| $$  | $$| $$$$  /$$$$| $$  \ $$   | $$   | $$      |  $$/ $$/
| $$$$$$$$| $$  | $$| $$ $$/$$ $$| $$$$$$$$   | $$   | $$$$$    \  $$$$/ 
| $$__  $$| $$  | $$| $$  $$$| $$| $$__  $$   | $$   | $$__/     >$$  $$ 
| $$  | $$| $$  | $$| $$\  $ | $$| $$  | $$   | $$   | $$       /$$/\  $$
| $$  | $$|  $$$$$$/| $$ \/  | $$| $$  | $$   | $$   | $$$$$$$$| $$  \ $$
|__/  |__/ \______/ |__/     |__/|__/  |__/   |__/   |________/|__/  |__/

                                  a u m a t e x
   ===========================================================

   Project: Uncovered Rome
   File: privacy.css
   Created: 2025-10-23
   -----------------------------------------------------------
   PURPOSE:
   Regola la tipografia e la leggibilità della pagina Privacy Policy,
   curando indentazione, marker e responsive layout.

   ===========================================================
*/

@import url('variables.css');

/* Layout base della pagina testuale privacy */
body {
  font-family: var(--font-body);
  line-height: 1.8;
  background: var(--colore-2);
  color: var(--colore-3);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}

.main-content {
  background: var(--colore-2);
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem);
  background: var(--colore-2);
  border-radius: 0;
  border: 1px solid rgba(0,0,0,0.08);
}

h1 {
  text-align: center;
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colore-1);
  margin-bottom: clamp(2rem, 6vw, 3rem);

}

h2 {
  font-family: var(--font-title);
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  color: var(--colore-1);
  margin: clamp(2rem, 4vw, 2.8rem) 0 1rem;
  position: relative;
  padding-left: 1.75rem;
}

h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 1rem;
  height: 1rem;
  border-radius: 0;
  background: var(--colore-1);
}

p {
  margin-bottom: 1.25rem;
  font-size: 1.05rem;
  color: var(--colore-3);
}

ul {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

ul li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 1.02rem;
  color: var(--colore-3);
}

ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 0;
  background: var(--colore-1);
  border: 1px solid rgba(200,159,101,0.35);
}

a {
  color: var(--colore-1);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--fx-duration-s) var(--fx-ease-standard);
}

a:hover,
a:focus-visible {
  color: var(--colore-4);
  text-decoration: underline;
}

@media (max-width: 640px) {
  body {
    padding: 1.5rem 0;
  }

  .container {
    padding: 1.75rem;
  }

  h2 {
    padding-left: 1.5rem;
  }

  h2::before {
    top: 0.5rem;
  }
}