/* ============================================================
   esse-h — foglio di stile principale
   Caricato da base.html, copre tutto il sito.
   ============================================================ */

/* ------------------------------------------------------------
   1. Variabili
   ------------------------------------------------------------ */
:root {
  --eh-black:      #000;
  --eh-grey:       #6c757d;
  --eh-border:     #dee2e6;
  --eh-error:      #b02a37;
  --eh-indent:     1.2rem;
  --eh-font-sm:    0.9rem;
  --eh-font-base:  1rem;
  --eh-font-lg:    2rem;
  --eh-transition: color 0.2s;
}

/* ------------------------------------------------------------
   2. Safe area (iPhone notch + home bar)
   ------------------------------------------------------------ */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ------------------------------------------------------------
   2. Navbar
   ------------------------------------------------------------ */
.navbar .nav-link {
  color: var(--eh-grey);
  transition: var(--eh-transition);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: var(--eh-black);
}

.custom-toggler {
  border: none;
  background: transparent;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--eh-grey);
  font-weight: 300;
  transition: var(--eh-transition);
}
.custom-toggler:hover                    { color: var(--eh-black); }
.custom-toggler[aria-expanded="true"]    { color: var(--eh-grey); }
.custom-toggler[aria-expanded="true"]:hover { color: var(--eh-black); }
.custom-toggler.just-clicked            { color: var(--eh-grey); }
.custom-toggler.just-clicked:hover      { color: var(--eh-black); }

.custom-toggler::after {
  content: "+";
  font-weight: 300;
  color: inherit;
  transition: color 0.15s ease, transform 0.15s ease;
}
.custom-toggler[aria-expanded="true"]::after { content: "–"; }
.custom-toggler:hover::after             { color: inherit; }

.custom-toggler:focus,
.custom-toggler:focus-visible,
.navbar-toggler:focus {
  outline: none !important;
  box-shadow: none !important;
}

@media (min-width: 768px) {
  .navbar-toggler { display: none; }
}

/* ------------------------------------------------------------
   3. Link nel contenuto
   ------------------------------------------------------------ */
main ul li a {
  color: var(--eh-grey);
  text-decoration: none;
  transition: var(--eh-transition);
}
main ul li a:hover { color: var(--eh-black); }

main a[href^="http"],
main a[href^="mailto"] {
  color: var(--eh-grey);
  text-decoration: underline;
  transition: var(--eh-transition);
}
main a[href^="http"]:hover,
main a[href^="mailto"]:hover { color: var(--eh-black); }

/* ------------------------------------------------------------
   4. Tipografia — entry text e liste
   ------------------------------------------------------------ */
.topic-list,
.song-list {
  list-style: none;
  padding-left: var(--eh-indent);
}
.topic-list li,
.song-list li {
  line-height: 1.4;
}

.topic-list {
  padding: 0;
  margin: 0 0 0 var(--eh-indent);
}
.topic-list li > span {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.topic-list pre {
  margin-left: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  text-indent: -2.25em;
  padding-left: 2em;
}

/* Layout a due colonne (solo topic "events") */
.topic-list--two-col {
  column-count: 2;
  column-gap: 4rem;
}
.topic-list--two-col li { break-inside: avoid; }

@media (max-width: 768px) {
  .topic-list--two-col { column-count: 1; }
}

/* Entry list — dettaglio topic (spacing e pre) */
.entry-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0 var(--eh-indent);
}
.entry-list li {
  margin-bottom: 1em;
}
.entry-list li > span {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.entry-list pre {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  padding-left: 2em;
}
.entry-list--spaced li {
  margin-bottom: 3em;
}

.entry-list--two-col {
  column-count: 2;
  column-gap: 4rem;
}
.entry-list--two-col li { break-inside: avoid; }

@media (max-width: 768px) {
  .entry-list--two-col { column-count: 1; }
}

.entry-text {
  white-space: pre-wrap;
  text-indent: 0;
}
.entry-text::first-line { text-indent: 0; }
.entry-text span {
  display: block;
  padding-left: 2em;
}

/* ------------------------------------------------------------
   5. Page title — animazione typing con cursore
   ------------------------------------------------------------ */
.page-title {
  font-size: var(--eh-font-base);
  font-weight: 400;
  margin: 0 0 1.5rem 0;
  cursor: default;
  user-select: none;
}
.page-title::after {
  content: "";
  display: none;
  width: 0.5em;
  height: 1em;
  background-color: var(--eh-black);
  margin-left: 0.1em;
  vertical-align: middle;
}
.page-title.is-typing::after {
  display: inline-block;
  animation: blink-cursor 0.7s steps(1) infinite;
}
.page-title.final-blink::after {
  display: inline-block;
  animation: blink-cursor 0.7s steps(1) 2;
}

/* ------------------------------------------------------------
   6. Player (pagine index e 000)
   ------------------------------------------------------------ */
.typing-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70vh;
}

/* 000: player centrato sovrapposto alla lista */
.typing-container--overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

.typing-text {
  font-size: var(--eh-font-lg);
  font-weight: 400;
  color: var(--eh-black);
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  pointer-events: auto;
}
.typing-text::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1em;
  background-color: var(--eh-black);
  margin-left: 0.1em;
  vertical-align: middle;
  animation: blink-cursor 0.7s steps(1) infinite;
}

.song-list {
  padding: 0;
  margin: 0 0 0 var(--eh-indent);
}
.song-item {
  cursor: pointer;
  font-family: inherit;
  font-size: var(--eh-font-base);
  color: var(--eh-grey);
  text-decoration: none;
  user-select: none;
  line-height: 1.2;
}
.song-item:hover { color: var(--eh-black); }
.song-item.loaded { color: var(--eh-black); font-weight: normal; }

#audio-player { display: none; }

/* ------------------------------------------------------------
   7. Hotspot segreto (solo home)
   ------------------------------------------------------------ */
#secret-other-entry {
  position: fixed;
  right: env(safe-area-inset-right);
  bottom: env(safe-area-inset-bottom);
  width: 110px;
  height: 110px;
  opacity: 0;
  z-index: 9999;
  border-top-left-radius: 72px;
  cursor: default;
  user-select: none;
  touch-action: manipulation;
}

/* ------------------------------------------------------------
   8. Area other — link e bottoni
   ------------------------------------------------------------ */
.other-content-wrap { padding-left: var(--eh-indent); }

.other-link {
  color: var(--eh-grey) !important;
  text-decoration: none !important;
  font-size: var(--eh-font-sm);
}
.other-link:hover { color: var(--eh-black) !important; }

button.other-link {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font-size: var(--eh-font-sm);
  font-family: inherit;
  font-weight: inherit;
  line-height: normal;
  display: inline;
  vertical-align: baseline;
  cursor: pointer;
}

.other-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  color: var(--eh-grey) !important;
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}
.other-linkbtn:focus,
.other-linkbtn:focus-visible {
  outline: none;
  box-shadow: none;
}
.other-linkbtn:hover { color: var(--eh-black) !important; }

.eh-action-btn {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--eh-grey) !important;
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  cursor: pointer;
}
.eh-action-btn:hover { color: var(--eh-black) !important; }
.eh-action-btn:focus,
.eh-action-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.eh-deletebtn,
.eh-deletebtn:hover,
.eh-deletebtn:focus {
  text-decoration: none !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------
   9. Area other — checkbox e input
   ------------------------------------------------------------ */
.eh-checkbtn {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--eh-black) !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}
.eh-checkbtn:hover {
  background: var(--eh-grey) !important;
  border-color: var(--eh-grey) !important;
}
.eh-checkbtn.is-checked {
  background: var(--eh-black) !important;
  border-color: var(--eh-black) !important;
}
.eh-checkbtn.is-checked:hover {
  background: var(--eh-black) !important;
  border-color: var(--eh-black) !important;
}
.eh-checkbtn:focus,
.eh-checkbtn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.eh-app { font-size: var(--eh-font-sm); }
.eh-app .list-group-item { font-size: var(--eh-font-sm); }
.eh-subline { font-size: var(--eh-font-sm); }
.eh-totals  { font-size: var(--eh-font-sm); }

.eh-app input,
.eh-app select,
.eh-app textarea {
  border: 0 !important;
  border-bottom: 1px solid var(--eh-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: inherit;
  padding: .25rem .15rem;
}
.eh-app input:focus,
.eh-app select:focus,
.eh-app textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  border-bottom-color: var(--eh-black) !important;
}

.eh-plus-btn {
  border: 1px solid var(--eh-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--eh-black) !important;
  padding: .25rem .55rem;
  font-size: var(--eh-font-base);
  line-height: 1;
}
.eh-plus-btn:hover {
  background: var(--eh-grey) !important;
  border-color: var(--eh-grey) !important;
  color: #fff !important;
}
.eh-plus-btn:focus,
.eh-plus-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------
   10. Area other — dashboard e form
   ------------------------------------------------------------ */
.eh-dash-item {
  border-bottom: 1px solid var(--eh-border);
  padding: 2.0rem 0;
  height: 100%;
  min-height: 140px;
}
.eh-dash-title {
  font-size: var(--eh-font-base);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}
.eh-dash-open  { font-size: var(--eh-font-sm); line-height: 1.2; }
.eh-dash-desc  { font-size: var(--eh-font-sm); margin-top: .55rem; }

.eh-form-errors { color: var(--eh-error); font-size: var(--eh-font-sm); }
.eh-helptext    { color: var(--eh-grey); font-size: var(--eh-font-sm); }
.eh-helptext ul { margin: .5rem 0 0 var(--eh-indent); }

/* ------------------------------------------------------------
   11. Ledger (Spesa / Bollette)
   ------------------------------------------------------------ */
.eh-ledger { font-variant-numeric: tabular-nums; }
.eh-ledger table   { width: 100%; display: table; table-layout: fixed; border-collapse: collapse; }
.eh-ledger tbody   { display: table-row-group; }
.eh-ledger tr      { display: table-row; }
.eh-ledger td      { display: table-cell; }

.eh-amtbox {
  display: inline-block;
  width: 10ch;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.eh-pair {
  display: inline-grid;
  grid-template-columns: auto 10ch;
  column-gap: .45rem;
  align-items: baseline;
  white-space: nowrap;
}
.eh-ghost { visibility: hidden; }

/* ------------------------------------------------------------
   12. Animazioni condivise
   ------------------------------------------------------------ */
@keyframes blink-cursor { 50% { opacity: 0; } }