/*
 * La testata di Sothra.
 *
 * Una riga sola dentro il `#Top_bar` di Betheme: logo, motore di ricerca,
 * menù breve, invito all'azione. Lo spazio che avanza va tutto alla ricerca,
 * perché è la cosa per cui la gente arriva su un sito di guide — non il menù.
 *
 * Due cose che questo foglio volutamente NON fa.
 *
 * Non decide la larghezza. Il contenuto sta dentro il `.container` di
 * Betheme, che è lo stesso del resto del sito: largo quanto dice l'opzione
 * del tema, con i margini che il tema usa sul telefono. Un numero scritto
 * qui si sarebbe scostato dal contenuto al primo cambio di impostazione —
 * ed è esattamente quello che era successo.
 *
 * Non ridisegna il logo. Lo stampa `includes/include-logo.php` del padre, e
 * il JavaScript di Betheme gli dà l'altezza dell'opzione «logo height»: qui
 * si tolgono solo i margini che servivano al suo impaginato a colonne, non
 * al nostro a flex.
 *
 * Sulla specificità: Betheme stila dentro `#Top_bar`, quindi una classe sola
 * non basterebbe a sovrascriverlo. Le regole qui sotto aggiungono la classe
 * della testata all'id — `#Top_bar.sothrach-top-bar` — e vincono di misura,
 * senza un solo `!important`.
 */

.sothrach-top-bar {
  --sothrach-ink: #1c3548;
  --sothrach-line: #e4e9ec;
  --sothrach-accent: #3d8dc4;
  --sothrach-cta: #7cb342;
  --sothrach-cta-dark: #689f38;
}

/* La colonna di Betheme è già flex: qui le si chiede solo di non lasciare
   margini attorno alla riga. */
#Top_bar.sothrach-top-bar > .container > .column.one {
  width: 100%;
  margin: 0;
}

.sothrach-bar {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
  min-height: 72px;
  padding-block: 0.625rem;
}

/* --- Logo ------------------------------------------------------------------
 *
 * `float:left` dentro un contenitore flex è ignorato dal browser, quindi
 * resta solo da azzerare i margini che Betheme gli dà per l'impaginato a
 * colonne. L'altezza la decide l'opzione del tema, via il suo JavaScript.
 */

#Top_bar.sothrach-top-bar .logo {
  flex: none;
  margin: 0;
  padding: 0;
}

#Top_bar.sothrach-top-bar .logo img {
  max-width: 190px;
  width: auto;
}

/* --- Motore di ricerca ----------------------------------------------------
 *
 * `min-width: 0` non è un dettaglio: senza, un figlio flessibile non scende
 * mai sotto la larghezza del proprio contenuto, e la barra spingerebbe fuori
 * il menù invece di stringersi.
 */

.sothrach-bar__search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 720px;
}

.sothrach-bar__search .sothra-search--compact {
  width: 100%;
}

/* La riga delle etichette dei filtri, dentro una testata alta settanta
   pixel, la farebbe crescere a ogni filtro scelto: lì sta sulla pagina dei
   risultati, non qui. */
.sothrach-bar__search .sothra-search__applied {
  display: none;
}

/* In home la ricerca non c'è — sta già, grande, nella prima fascia. Senza
   qualcosa che occupi il centro, logo e menù si ritroverebbero appiccicati
   a sinistra. */
.sothrach-bar__gap {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Menù ----------------------------------------------------------------- */

.sothrach-bar__nav {
  flex: none;
}

.sothrach-header__menu {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sothrach-header__menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#Top_bar.sothrach-top-bar .sothrach-header__menu a {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sothrach-ink);
  text-decoration: none;
  white-space: nowrap;
  padding: 0;
}

#Top_bar.sothrach-top-bar .sothrach-header__menu a:hover,
#Top_bar.sothrach-top-bar .sothrach-header__menu a:focus-visible {
  color: var(--sothrach-accent);
  text-decoration: none;
}

#Top_bar.sothrach-top-bar .sothrach-header__menu .current-menu-item > a,
#Top_bar.sothrach-top-bar .sothrach-header__menu .current_page_item > a {
  color: var(--sothrach-accent);
}

/* --- Invito all'azione ----------------------------------------------------- */

.sothrach-bar__cta {
  flex: none;
}

#Top_bar.sothrach-top-bar .sothrach-bar__cta-link {
  display: inline-block;
  background: var(--sothrach-cta);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.75rem 1.375rem;
  border-radius: 26px;
  text-decoration: none;
  white-space: nowrap;
}

#Top_bar.sothrach-top-bar .sothrach-bar__cta-link:hover,
#Top_bar.sothrach-top-bar .sothrach-bar__cta-link:focus-visible {
  background: var(--sothrach-cta-dark);
  color: #fff;
  text-decoration: none;
}

/* --- Il pulsante del menù mobile -------------------------------------------
 *
 * È quello di Betheme — la classe serve al suo JavaScript — ma Betheme lo
 * posiziona in assoluto contro il bordo destro della barra. Qui è un elemento
 * della riga come gli altri, quindi la posizione torna normale e la
 * visibilità la decidono le soglie più sotto.
 */

#Top_bar.sothrach-top-bar a.sothrach-bar__burger {
  display: none;
  position: static;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0;
  border: 1px solid var(--sothrach-line);
  border-radius: 12px;
  color: var(--sothrach-ink);
  font-size: 1.125rem;
  text-align: center;
  text-decoration: none;
}

#Top_bar.sothrach-top-bar a.sothrach-bar__burger:hover,
#Top_bar.sothrach-top-bar a.sothrach-bar__burger:focus-visible {
  border-color: var(--sothrach-accent);
  color: var(--sothrach-accent);
}

/* -----------------------------------------------------------------------------
 * Come si stringe
 *
 * Tre soglie, e una regola sola dietro: la ricerca è l'ultima cosa a cedere.
 * Prima sparisce l'invito all'azione, che è nel menù mobile comunque; poi il
 * menù, che si ritira nel pulsante; alla fine la barra va a capo e si prende
 * tutta la larghezza.
 * -------------------------------------------------------------------------- */

@media (max-width: 1240px) {
  .sothrach-header__menu {
    gap: 0.875rem;
  }

  #Top_bar.sothrach-top-bar .sothrach-header__menu a {
    font-size: 0.8125rem;
  }

  #Top_bar.sothrach-top-bar .sothrach-bar__cta-link {
    padding: 0.6875rem 1rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 1100px) {
  .sothrach-bar__nav {
    display: none;
  }

  #Top_bar.sothrach-top-bar a.sothrach-bar__burger {
    display: inline-flex;
  }
}

@media (max-width: 860px) {
  .sothrach-bar__cta {
    display: none;
  }
}

@media (max-width: 680px) {
  .sothrach-bar {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-block: 0.625rem;
    min-height: 0;
  }

  /* Logo e pulsante sulla prima riga, la ricerca su tutta la seconda: su un
     telefono una barra di ricerca stretta fra due elementi non si usa. */
  #Top_bar.sothrach-top-bar .logo {
    order: 1;
    margin-right: auto;
  }

  #Top_bar.sothrach-top-bar a.sothrach-bar__burger {
    order: 2;
  }

  .sothrach-bar__search {
    order: 3;
    flex: 1 0 100%;
    max-width: none;
  }

  /* Senza ricerca il riempitivo non serve: su due righe sprecherebbe una riga. */
  .sothrach-bar__gap {
    display: none;
  }

  #Top_bar.sothrach-top-bar .logo img {
    max-width: 150px;
  }
}

/* -----------------------------------------------------------------------------
 * Il sottotitolo di Betheme sulla ricerca
 *
 * Betheme ci scrive «N results found for: parola», leggendo l'indirizzo. Con
 * del testo cercato va bene — la frase gliela sistema un filtro in PHP — ma
 * una ricerca fatta di soli filtri non ha nessuna parola da mettere lì, e il
 * titolo diventerebbe «0 Guide trovate in: » con il posto vuoto. In quel caso
 * parla il plugin, che sa dire «nessun risultato per questi filtri», e questa
 * riga toglie di mezzo l'altro.
 * -------------------------------------------------------------------------- */
body.sothrach-senza-sottotitolo #Subheader {
  display: none;
}

/* -----------------------------------------------------------------------------
 * Le pagine del plugin dentro il contenitore del tema
 *
 * Il plugin mette una larghezza di ripiego sul proprio contenitore, per i temi
 * che non ne abbiano una. Qui ce l'abbiamo: `container` è la stessa classe del
 * resto del sito, quindi quella del plugin si toglie di mezzo e la larghezza
 * la decide Betheme — oggi e dopo averla cambiata dalle opzioni.
 * -------------------------------------------------------------------------- */
.sothra-shell.container {
  width: auto;
}

/* -----------------------------------------------------------------------------
 * Il titolo dei risultati
 *
 * Lo stampa il plugin, perché il sottotitolo di Betheme qui è nascosto (il
 * perché sta in includes/header-functions.php). Si veste come il titolo di
 * pagina del tema, così la pagina dei risultati non sembra di un altro sito.
 * -------------------------------------------------------------------------- */
body.search .sothra-results__title {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  color: #3d8dc4;
}

@media (max-width: 767px) {
  body.search .sothra-results__title {
    font-size: 1.5rem;
  }
}