/* JouleSpecs — Header, navigazione, footer (design guide v2.0 §4.1) */

/* ===== Wordmark ===== */
/* «JOULESPECS» in Jost: la cella carica apre, «Joule» in ruggine, «Specs» leggero.
   È la targa del brand: stessa forma in header, footer, favicon.
   Jost è variabile 300-600: niente pesi oltre il 600, che il browser simulerebbe. */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__joule { font-weight: 500; color: var(--color-accent); }
.wordmark__specs { font-weight: 300; }

/* La cella: il segno del marchio, prima del nome.
   L'altezza e` quella delle maiuscole di Jost, la larghezza segue il viewBox.
   Il contenitore e` in linea di base col testo (`align-items: baseline` sul
   wordmark), e siccome un SVG appoggia sul proprio bordo inferiore, il fondo
   della cella cade esatto sulla linea del testo: niente `vertical-align` a
   correggere a occhio. */
.wordmark__cella {
  height: .72em;
  width: auto;
  margin-right: .34em;
  /* Tutta verde, contorno compreso: un colore solo, uguale su tutti e due i fondi. */
  color: var(--color-charge);
  flex: none;
}

/* Nel footer, su antracite, la brace del nome va alzata o non si legge. */
.site-footer .wordmark { color: var(--color-text-inverse); }
.site-footer .wordmark__joule { color: var(--color-ember-on-ink); }

/* Nell'header la carica sale fino a poco piu` di meta` e resta li`: la cella non
   si riempie mai del tutto, che e` esattamente quello che il sito racconta.
   Solo header; il footer resta fermo, e chi chiede meno animazioni non la vede. */
@media (prefers-reduced-motion: no-preference) {
  .site-header .wordmark__carica {
    transform-origin: 3.5px center;
    animation: cella-carica 9s ease-in-out infinite;
  }
}
@keyframes cella-carica {
  0%, 8%    { transform: scaleX(.06); }
  38%, 82%  { transform: scaleX(1); }
  96%, 100% { transform: scaleX(.06); }
}

/* ===== Site Header ===== */

/* Altezza dell'header (60px di barra, 3px di filetto rosso, 1px di riga): la
   usano le pagine che riempiono lo schermo sotto di lui, come l'atlante. */
:root { --header-h: 64px; }

.site-header {
  border-top: 3px solid var(--color-ember);
  border-bottom: var(--rule);
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 60px;
}

/* La barra intera — targa, sette voci, ricerca e sei lingue — chiede circa
   1024px per starci, e in quella fascia gioca stretta. Sotto ci va il menu a
   scomparsa: lasciarla sfondare
   significherebbe una barra di scorrimento orizzontale su tutto il sito, che
   è il modo peggiore di dire che qualcosa non ci sta. */
@media (min-width: 1280px) {
  .site-nav { gap: var(--space-6); }
}

.site-nav__logo {
  font-size: 22px;
  flex-shrink: 0;
}

.site-nav__links {
  display: none;
  align-items: center;
  gap: var(--space-5);
}

.site-nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.site-nav__link:hover { color: var(--color-text-primary); border-bottom-color: var(--color-text-primary); }
.site-nav__link--active { color: var(--color-text-primary); border-bottom-color: var(--color-accent); }

.site-nav__search {
  display: none;
  position: relative;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: var(--rule-strong);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background: var(--color-bg);
  /* Cede larghezza prima di far sfondare la barra: 220px se c'è spazio, mai
     meno di quanto serve a leggere quello che si sta scrivendo. */
  flex: 0 1 220px;
  min-width: 120px;
  margin-left: auto;
}
.site-nav__search:focus-within {
  border-color: var(--color-ink);
}
.site-nav__search-icon { flex-shrink: 0; color: var(--color-text-tertiary); }
.site-nav__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  outline: none;
}
.site-nav__search-input::placeholder { color: var(--color-text-disabled); }
.site-nav__search-input::-webkit-search-cancel-button { display: none; }

.site-nav__search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: -1px;
  right: -1px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--color-bg-overlay);
  border: var(--rule-strong);
  box-shadow: var(--shadow-overlay);
  max-height: 70vh;
  overflow-y: auto;
  z-index: 50;
}
.site-nav__search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  cursor: pointer;
}
.site-nav__search-item:hover,
.site-nav__search-item.is-active { background: var(--color-bg-subtle); }
.site-nav__search-thumb {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  object-fit: contain;
  background: var(--color-plate);
}
.site-nav__search-thumb--empty { border: var(--rule); background: var(--color-bg-inset); }
.site-nav__search-text { display: flex; flex-direction: column; min-width: 0; }
.site-nav__search-name {
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-nav__search-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-nav__search-empty {
  padding: 12px 8px;
  text-align: center;
  color: var(--color-text-disabled);
  font-size: var(--text-sm);
}

.site-nav__mobile-toggle {
  display: flex;
  align-items: center;
  padding: 8px;
  color: var(--color-text-primary);
  background: none;
  border: none;
}

/* Mobile menu — aperto via JS */
.site-nav__mobile-menu {
  display: none;
  flex-direction: column;
  /* padding-block, non padding: il shorthand azzererebbe i margini laterali di .container-content */
  padding-block: var(--space-2) var(--space-5);
  border-top: var(--rule);
  background: var(--color-bg);
}
.site-nav__mobile-menu.is-open {
  display: flex;
}
.site-nav__mobile-menu .site-nav__link {
  padding: var(--space-3) var(--space-2);
  font-size: var(--text-base);
  border-bottom: var(--rule);
}
.site-nav__mobile-langs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-1) 0;
}

/* Sotto i 600px la barra ospita solo targa e menu: le lingue vanno nel menu */
@media (max-width: 599px) {
  .site-nav > .site-nav__langs { display: none; }
}

@media (min-width: 1024px) {
  .site-nav__links        { display: flex; }
  .site-nav__search       { display: flex; }
  .site-nav__mobile-toggle { display: none; }
}

/* ===== Selettore lingua ===== */
.site-nav__langs {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.site-nav__lang {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  padding: 4px 6px;
  color: var(--color-text-tertiary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-nav__lang:hover { color: var(--color-text-primary); }
.site-nav__lang--active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-accent);
}

/* Fra i 1024 e i 1280 la barra ci sta solo giocando stretta: meno respiro fra
   le voci e fra le lingue. Va in fondo al foglio perché sovrascrive regole
   scritte sopra, e a parità di specificità vince l'ultima. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-nav { gap: var(--space-4); }
  .site-nav__links { gap: 8px; }
  .site-nav__lang { padding: 4px 3px; }
}

/* ===== Site Footer — la quarta di copertina, in inchiostro ===== */

.site-footer {
  background: var(--color-ink);
  color: var(--color-text-inverse);
  margin-top: var(--space-20);
  --color-border: #3A3631;
  --color-border-strong: #5C564E;
}

.footer-inner {
  padding-top: var(--space-12);
  padding-bottom: var(--space-10);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 900px) {
  .footer-inner {
    grid-template-columns: 1.4fr 2fr;
    gap: var(--space-16);
  }
}

.footer-brand .wordmark {
  color: var(--color-text-inverse);
  font-size: var(--text-2xl);
}

.footer-brand__desc {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: #B8B0A4;
  max-width: 340px;
  line-height: var(--leading-relaxed);
}

/* Disclosure affiliate (livello 1, obbligo Amazon): in chiaro, sempre visibile */
.footer-brand__disclosure {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: #B8B0A4;
  max-width: 340px;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

@media (min-width: 640px) {
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}

.footer-cols .eyebrow { color: #8F8577; }

.footer-col__list {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col__link {
  font-size: var(--text-sm);
  color: #D9D2C6;
  text-decoration: none;
}
.footer-col__link:hover { color: var(--color-text-inverse); text-decoration: underline; text-underline-offset: 3px; }

.footer-bottom {
  padding-top: var(--space-5);
  padding-bottom: var(--space-8);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #8F8577;
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}