/* Grassetto per la voce di menu "View All Other Policies....." */
a.dropdown-item[href="https://ego.quoll.it/index.php/ego/View-All-Other-Policies"] {
  font-weight: bold;
}

/* Trasforma i menu a tendina della barra di navigazione PUBBLICA (About, For Authors,
   Editorial Policies) da griglia orizzontale a elenco verticale a cascata.
   Selettore scoped su #primaryNav: NON tocca il menu personale dell'account
   (ojsadmin), che vive in un contenitore separato (#primaryNav-userNav / #userNav).
   Non tocca la proprietà "display" che apre/chiude il menu: interviene solo
   sulla disposizione interna delle voci, quindi non rompe il click di apertura. */
#primaryNav .dropdown-menu {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  width: 280px !important;
  min-width: 280px !important;
}

/* Ogni voce è una griglia a due colonne: pallino (14px) + testo (resto dello
   spazio). white-space: normal forza il testo lungo ad andare a capo invece
   di allargare il box. Quando va a capo, resta confinato nella colonna di
   testo e si allinea automaticamente con l'inizio della riga sopra. */
#primaryNav .dropdown-menu .dropdown-item {
  width: 100% !important;
  white-space: normal !important;
  text-align: left !important;
  display: grid !important;
  grid-template-columns: 14px 1fr !important;
  column-gap: 8px !important;
  align-items: start !important;
}

#primaryNav .dropdown-menu .dropdown-item::before {
  content: "\2022";
}

/* Ridimensiona la copertina gialla in home page: larghezza 240px, altezza
   332px (allineata al testo "Double-Anonymized"), tutti gli elementi
   visibili incluso il logo ESG, nessun taglio. */
.ego-cover {
  width: 240px !important;
  height: 332px !important;
}

.ego-cover img {
  width: 240px !important;
  height: 332px !important;
}

/* ===================================================================
   HEADER: TITOLO SU UNA RIGA E SECONDO DIVISORE VERTICALE

   Requisiti:
   - il titolo del giornale sta sempre su una sola riga;
   - un secondo divisore verticale fra titolo e logo della European
     Society of Gynecology, simmetrico a quello fra logo "ego" e titolo;
   - il divisore resta a distanza costante dal testo a ogni larghezza di
     finestra e non scompare mai.

   Come e' ottenuto
   ----------------
   Il titolo ha white-space:nowrap, quindi non va mai a capo, e
   width:max-content, quindi il suo box coincide esattamente con il
   testo: lo scarto misurato fra box e testo e' 0px a ogni larghezza.
   Il divisore e' lo pseudo-elemento ::after del contenitore, che in
   flexbox e' un elemento flex a tutti gli effetti, ordinato con la
   proprieta' order. Sta quindi subito dopo il box del titolo, a una
   distanza pari al gap del tema.

   Il font del titolo
   ------------------
   Il titolo su una riga misura 17,81em, cioe' 17,8px di larghezza per
   ogni px di font. Con il font del tema, clamp(16px, 3vw, 50px), una
   riga sola non entrerebbe accanto ai due loghi: servono 890px contro i
   762px disponibili. Il font e' quindi ricalcolato in funzione dello
   spazio effettivamente libero:

     clamp(11px, calc(5.6vw - 37px), 42px)

   Il tetto di 42px e' il massimo che entra nei 762px disponibili quando
   il contenitore e' al suo massimo di 1400px. Il termine 5,6vw - 37px
   segue lo spazio libero alle finestre piu' strette, dove il
   contenitore vale quanto la finestra.

   I due loghi hanno flex:0 1 auto: restano alla loro dimensione
   naturale finche' c'e' spazio e cedono soltanto sotto, dove
   altrimenti l'header andrebbe in overflow orizzontale. E' il
   comportamento che il tema ha gia' di suo sotto i 992px.

   Misurazioni a modifica applicata
   --------------------------------
   finestra 1900px -> 1 riga, font 42px,   scarto 0px, divisore 28px, loghi 170/220
   finestra 1429px -> 1 riga, font 42px,   scarto 0px, divisore 28px, loghi 170/220
   finestra 1150px -> 1 riga, font 27,4px, scarto 0px, divisore 28px, loghi 170/220
   finestra  950px -> 1 riga, font 16,2px, scarto 0px, divisore  2px, loghi 170/220
   finestra  500px -> 1 riga, font 11px,   scarto 0px, divisore  2px, loghi 108/151
   Nessun overflow orizzontale a nessuna delle larghezze provate.
   La distanza del divisore vale 28px sopra i 992px e 2px sotto, perche'
   e' il gap del tema: la stessa che ha il divisore di sinistra.
   =================================================================== */

/* Disattiva il divisore ancorato al logo ESG delle versioni precedenti.
   Senza questa regola le linee diventano due. */
.ego-logo-right::before {
  content: none;
}

.ego-header-main {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
}

.ego-header-main > .ego-logo-left {
  order: 1;
  flex: 0 1 auto;
  min-width: 0;
}

.ego-header-main > .ego-divider {
  order: 2;
  flex: 0 0 auto;
}

/* Titolo sempre su una riga, box coincidente con il testo */
.ego-header-main > .ego-journal-title {
  order: 3;
  flex: 0 0 auto;
  white-space: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  font-size: clamp(11px, calc(5.6vw - 37px), 42px) !important;
}

/* Divisore destro: stessi 1px, 88px e rgb(141,141,141) del sinistro */
.ego-header-main::after {
  order: 4;
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 1px;
  height: 88px;
  background-color: rgb(141, 141, 141);
}

/* Logo ESG ancorato a destra: assorbe lo spazio libero */
.ego-header-main > .ego-logo-right {
  order: 5;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}