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

/* ===== Wordmark ===== */
/* «COFFEESPECS» in Archivo espanso: Coffee leggero, Specs pesante, punto rosso
   a chiudere. È la targa del brand: stessa forma in header, footer, favicon. */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-stretch: var(--stretch-nameplate);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__coffee { font-weight: 500; }
.wordmark__specs  { font-weight: 800; }
/* Il chicco: rosso pieno, solco del colore della superficie. Sostituisce il punto. */
.wordmark__chicco {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-left: 0.12em;
  transform: translateY(0.04em);
  color: var(--color-accent);
  flex-shrink: 0;
}
.wordmark__solco { stroke: var(--color-bg); }
.site-footer .wordmark__solco { stroke: var(--color-ink); }

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

.site-header {
  border-top: 3px solid var(--color-accent);
  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;
  }
}