/*
 * La barra e il fondo pagina di tutto il sito (resources/views/partials/testata.blade.php
 * e piede.blade.php). Stanno in un file a parte perché li usano anche le pagine del libro e del
 * diario, che hanno stili loro: per questo ogni regola parte da .st o da .sp e dice tutto
 * quello che serve.
 *
 * Le sezioni sono tre cerchi: Io (giallo), Noi (verde collina), Mondo (verde scuro). Sul computer
 * stanno in alto; sotto i 900 pixel vanno in una barra fissa in basso (.st-basso).
 */
.st { --st-io: #9E6B12; --st-noi: #3D803F; --st-mondo: #2C5E2E; position: relative; z-index: 70; background: #FFFCF5; border-bottom: 1px solid #E7E0CE; font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1C1B17; line-height: 1.3; }
.st *, .st *::before, .st *::after { box-sizing: border-box; }
.st-riga { max-width: 1240px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 10px 22px; }
.st a { color: #1C1B17; text-decoration: none; font-size: 16px; font-weight: 600; }
.st-marchio { display: inline-flex; align-items: center; gap: 10px; flex: none; font-weight: 900 !important; font-size: 24px !important; letter-spacing: -0.02em; }
.st-sole { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #F9BE3E; font-size: 18px; }
.st-cerchio { display: block; flex: none; }

/* Le tre sezioni in alto */
.st-sezioni { display: flex; gap: 6px; flex: 1 1 auto; justify-content: center; }
.st .st-tab { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; border-radius: 999px; border: 1.5px solid transparent; }
.st .st-tab:hover { background: #F6F1E4; }
.st .st-tab[aria-current] { background: #F6F1E4; border-color: #E7E0CE; }
.st-tab-testo { display: flex; flex-direction: column; line-height: 1.05; }
.st-tab-nome { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.st-tab-motto { font-family: "Caveat", cursive; font-size: 17px; font-weight: 600; color: #55534A; }
.st-tab.st-io .st-cerchio, .st-basso .st-io .st-cerchio { color: var(--st-io); }
.st-tab.st-noi .st-cerchio, .st-basso .st-noi .st-cerchio { color: var(--st-noi); }
.st-tab.st-mondo .st-cerchio, .st-basso .st-mondo .st-cerchio { color: var(--st-mondo); }

/* Chi sei: Entra e Unisciti, oppure la tua iniziale con il menu */
.st-account { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: none; }
.st .st-entra:hover { color: #2C5E2E; text-decoration: underline; text-underline-offset: 5px; }
.st .st-bottone { background: #1C1B17; color: #FFFCF5; border-radius: 999px; padding: 8px 18px; }
.st .st-bottone:hover { background: #3D803F; color: #FFFCF5; }
.st .st-persona { position: relative; margin: 0; padding: 0; background: none; border-radius: 0; }
.st .st-persona summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 0; color: #1C1B17; font-family: inherit; }
.st-persona summary::-webkit-details-marker { display: none; }
.st-iniziale { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #FFFCF5; font-weight: 800; font-size: 18px; border: 2px solid #FFFCF5; box-shadow: 0 0 0 1.5px #E7E0CE; }
.st-persona[open] .st-iniziale, .st-persona summary:hover .st-iniziale { box-shadow: 0 0 0 2px #1C1B17; }
.st-pannello { position: absolute; right: 0; top: calc(100% + 10px); width: min(88vw, 280px); background: #FFFCF5; border: 1px solid #E7E0CE; border-radius: 18px; padding: 14px 18px 8px; box-shadow: 0 16px 40px rgba(28, 27, 23, 0.16); }
.st .st-pannello p.st-chi { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: #55534A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pannello ul { list-style: none; margin: 0; padding: 0; }
.st-pannello a, .st-pannello .st-esci button { display: block; padding: 9px 0; }
.st-pannello a:hover { color: #2C5E2E; text-decoration: underline; }
.st-esci { display: block; margin: 0; }
.st-esci button { font: inherit; font-size: 16px; font-weight: 600; background: none; border: 0; padding: 0; color: #55534A; cursor: pointer; }
.st-esci button:hover { color: #2C5E2E; text-decoration: underline; }
.st-pallino { display: inline-block; min-width: 22px; padding: 0 6px; margin-left: 2px; border-radius: 999px; background: #F9BE3E; color: #1C1B17; font-size: 13px; font-weight: 800; text-align: center; }

/* Le voci della sezione in cui sei: pillole che sul telefono scorrono di lato */
.st-sotto { background: #F6F1E4; border-top: 1px solid #E7E0CE; }
.st-sotto .st-riga { padding-top: 8px; padding-bottom: 8px; gap: 6px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.st-sotto .st-riga::-webkit-scrollbar { display: none; }
.st .st-sotto a { flex: none; font-size: 15px; padding: 6px 14px; border-radius: 999px; border: 1px solid transparent; }
.st .st-sotto a:hover { background: #FFFCF5; border-color: #E7E0CE; }
.st .st-sotto a[aria-current] { background: #1C1B17; border-color: #1C1B17; color: #FFFCF5; }
.st .st-sotto a:first-child { font-weight: 800; }

/* La barra del telefono */
.st-basso { display: none; }
@media (max-width: 899px) {
  .st-sezioni { display: none; }
  .st-riga { padding: 8px 16px; }
  .st-marchio { font-size: 22px !important; }
  .st-sole { width: 34px; height: 34px; font-size: 16px; }
  .st-basso { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: #FFFCF5; border-top: 1px solid #E7E0CE; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .st .st-basso a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 5px; border-radius: 14px; font-size: 13px; font-weight: 700; color: #55534A; }
  .st .st-basso a[aria-current] { background: #F6F1E4; color: #1C1B17; font-weight: 800; }
  .st-basso .st-cerchio { width: 26px; height: 26px; }
  /* Lo spazio per la barra, in fondo a ogni pagina (anche quelle del libro). */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .st-account { gap: 10px; }
  .st .st-bottone { padding: 7px 13px; font-size: 15px; }
  .st .st-entra { font-size: 15px; }
}

/* ---- il fondo pagina ---- */
.sp { margin-top: 72px; background: #2C5E2E; color: #FFFCF5; font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.45; }
.sp.sp-incorporata { margin-top: 0; }
.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }
.sp p { margin: 0; }
.sp-colonne { max-width: 1240px; margin: 0 auto; padding: 40px 20px 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 26px 32px; }
.sp-nome { font-weight: 900; font-size: 24px; letter-spacing: -0.02em; }
.sp-nome span { color: #F9BE3E; }
.sp-motto { font-family: "Caveat", cursive; font-size: 22px; color: #F9D98A; }
.sp .sp-titolo { margin: 0 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: #F9D98A; }
.sp ul { list-style: none; margin: 0; padding: 0; }
.sp li a { display: inline-block; min-height: 0; padding: 4px 0; }
.sp a { color: #FFFCF5; text-decoration: none; font-weight: 500; }
.sp a:hover { color: #F9BE3E; text-decoration: underline; }
.sp-sotto { max-width: 1240px; margin: 0 auto; padding: 16px 20px 28px; border-top: 1px solid rgba(255, 252, 245, 0.2); display: grid; gap: 4px; font-size: 13.5px; color: rgba(255, 252, 245, 0.78); }
.sp-sotto a { display: inline; min-height: 0; color: inherit; text-decoration: underline; }
/* Nelle pagine del libro il motore del design fissa pagina e #dc-root all'altezza della finestra
   e lascia uscire il resto: il fondo pagina, che sta dopo, finirebbe sotto la prima schermata, e lo
   spazio che il diario lascia in fondo per la sua barra del telefono non servirebbe. */
html body #dc-root, html body #dc-root > .sc-host { height: auto; }
html:has(#dc-root) body { height: auto; min-height: 100%; }