/*
  layout.css
  Struttura e disposizione del sito "Io sono Pablo".
  - Body a colonna: header in alto (sempre visibile) + area pagine sotto
  - Header a 4 righe: tab bar | avatar | url+ricerca | lingue+accessibilità
  - Tab bar di navigazione sempre visibile (niente hamburger)
  - Sezioni affiancate orizzontalmente (swipe / tab)
*/

/* ============================ STRUTTURA GENERALE ============================ */

/* Niente scroll di pagina: si naviga in orizzontale e dentro le sezioni */
html,
body {
  overflow: hidden;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================ HEADER ============================ */
.site-header {
  flex: 0 0 auto;          /* altezza naturale, sempre in cima */
  width: 100%;
  background: var(--color-yellow);
  box-shadow: var(--shadow);
  z-index: 500;
}

/* ---------- Riga 1: tab bar di navigazione ---------- */
.site-nav {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.site-nav a {
  flex: 1;                 /* ogni tab occupa la stessa larghezza */
  text-align: center;
  padding: 12px 4px;
  background: var(--color-yellow);     /* #F5C518 */
  color: var(--color-link);            /* #1A3A5C */
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-right: 1px solid #C8A010;     /* divisore giallo scuro */
  transition: background 200ms ease, color 200ms ease;
}

.site-nav a:last-child {
  border-right: none;
}

.site-nav a:hover,
.site-nav a:focus {
  background: #C8A010;
  color: var(--color-white);
}

.site-nav a.active {
  background: #C8A010;     /* tab attiva: giallo scuro */
  color: var(--color-white);
}

/* ---------- Riga 2: avatar centrato ---------- */
.header-middle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--color-yellow);
}

/* Foto di Pablo: cerchio con il viso ben visibile */
.header-avatar {
  display: block;
  margin: 0 auto;              /* centrata */
  width: 90px;
  height: 90px;
  border-radius: 50%;          /* circolare */
  object-fit: cover;           /* si adatta senza distorcersi */
  object-position: center top; /* mostra il viso, non i piedi */
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow);
}

/* ---------- Riga 3: selettore lingua + accessibilità ---------- */
.header-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 8px;
  background: var(--color-yellow);
  flex-wrap: wrap;
  justify-content: center;
}

/* Dropdown lingua */
.lang-select {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-white);
  background: var(--color-link);   /* #1A3A5C */
  border: none;
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.lang-select option {
  /* alcuni browser usano i colori di sistema per le option */
  color: var(--color-text);
  background: var(--color-white);
}

.font-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.font-btn {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--color-link);
  background: transparent;
  border: 2px solid var(--color-link);
  border-radius: var(--radius);
  padding: 0.25rem 0.55rem;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}

.font-btn:hover {
  background: var(--color-link);
  color: var(--color-white);
}

/* Bottone disabilitato (livello min/max raggiunto) */
.font-btn[disabled],
.font-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.font-btn[disabled]:hover,
.font-btn[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--color-link);
}

/* ============================ SEZIONI ORIZZONTALI ============================ */

/* Area pagine: occupa lo spazio rimanente sotto l'header */
main {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;        /* niente scroll orizzontale di pagina */
}

/* Contenitore delle 8 sezioni affiancate (800vw) */
.sections-wrapper {
  display: flex;
  flex-direction: row;
  width: 800vw;
  height: 100%;
  transform: translateX(0);
  transition: transform 400ms ease-in-out;
  will-change: transform;
}

.section {
  width: 100vw;
  height: 100%;
  flex-shrink: 0;          /* non si comprimono nella riga flex */
  overflow-y: auto;        /* il contenuto lungo scorre verticalmente */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Fascia titolo grigia */
.section__title-band {
  background: var(--color-bg);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
}

.section__title {
  max-width: 18ch;
  /* unità em: scala insieme al testo del body quando si cambia livello */
  font-size: clamp(2.4em, 6vw, 4.6em);
  font-weight: 400;
  text-align: center;
  margin-inline: auto;
  color: var(--color-text);
}

/* Area contenuto gialla */
.section__content {
  flex: 1;
  background: var(--color-yellow);
  padding: var(--space-lg);
  text-align: center;
}

.section__content p {
  font-size: 1.15em; /* em: scala con il livello di testo */
  color: var(--color-text);
}

/* ============================ FOOTER ============================ */
/* Layout a piena pagina: il footer non occupa spazio verticale. */
.site-footer {
  display: none;
}