/* EMBLEMA WOODFLOW și semnele meniurilor.
 *
 * Culorile stau aici, nu în desenul SVG: brazii sunt pictați cu `currentColor`,
 * deci iau culoarea locului unde stau. Așa emblema merge și pe antetul verde
 * închis, și pe fișa albă de conectare, și pe tema de noapte a stației — fără
 * să existe trei desene deosebite care s-ar despărți la prima schimbare.
 */

.wf-emblema {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.05;
  vertical-align: middle;
}
.wf-brazi { width: 30px; height: 31px; flex: none; color: var(--wf-verde-66) }
.wf-emblema-mare .wf-brazi { width: 44px; height: 46px }

.wf-emblema-scris { display: flex; flex-direction: column; gap: 2px; min-width: 0 }

.wf-marca {
  font-weight: 900;
  letter-spacing: .01em;
  font-size: 22px;
  white-space: nowrap;
}
.wf-emblema-mare .wf-marca { font-size: 26px }
/* „WOOD" ia culoarea locului, „FLOW" rămâne verde: așa se citește marca la fel
 * ca pe afiș, și pe fund închis, și pe fund deschis. */
.wf-marca b { font-weight: 900 }
.wf-marca i { font-style: normal; font-weight: 900; color: var(--wf-verde-66) }

.wf-deviza, .wf-emblema .wf-modul {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  opacity: .78;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Antetul: titlul nu mai scrie „WoodFlow", îl spune emblema. */
h1.wf-titlu-cu-emblema { display: flex; align-items: center; margin: 0 }

/* Fișa de conectare: emblema stă în capul ei, deasupra a tot. */
.wf-emblema-cap {
  display: flex;
  justify-content: center;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(20, 60, 40, .12);
}
/* Pe fișa albă, brazii și „FLOW" rămân verzi, iar „WOOD" se face închis ca
 * scrisul din jur. */
.wf-emblema-cap .wf-marca b { color: var(--wf-verde-23b) }

/* Semnele meniurilor: pline, cu volum.
 *
 * Culorile stau AICI, nu în atributele desenului: unealta care face tema de
 * noapte citește CSS, iar o culoare scrisă în SVG i-ar rămâne nevăzută.
 *
 * Semnul plin cere puțin mai mult loc decât cel din linii - 19 px în loc de
 * 17 - și nu se mai stinge cu `opacity`: un desen colorat pălit arată murdar,
 * nu discret. Fila care nu e aleasă își ține semnul întreg; deosebirea o face
 * fundalul filei active, ca până acum. */
:root {
  --semn3d-inchis: var(--wf-verde-41b);
  --semn3d-mijloc: var(--wf-verde-69);
  --semn3d-deschis: var(--wf-cenusiu-93);
  --semn3d-lucire: rgba(255,255,255,.75);
  --semn3d-coaja: var(--wf-chihlimbar-34b);
  --semn3d-inima: var(--wf-chihlimbar-82);
  --semn3d-inel: var(--wf-chihlimbar-67);
  --semn3d-muschi: var(--wf-verde-56);
}
.wf-semn-meniu { width: 19px; height: 19px; flex: none }
.wf-semn-meniu .umbra { fill: var(--semn3d-inchis) }
.wf-semn-meniu .mijloc { fill: var(--semn3d-mijloc) }
.wf-semn-meniu .fata { fill: var(--semn3d-deschis) }
.wf-semn-meniu .lucire { fill: var(--semn3d-lucire) }
.wf-semn-meniu .coaja { fill: var(--semn3d-coaja) }
.wf-semn-meniu .inima { fill: var(--semn3d-inima) }
.wf-semn-meniu .inel { fill: var(--semn3d-inel) }
.wf-semn-meniu .muschi { fill: var(--semn3d-muschi) }
button.wf-meniu-cu-semn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Pe ecrane mici semnul rămâne, cuvântul se strânge: în hală se apasă cu
 * mănușa, iar o țintă mai mare e mai bună decât una frumoasă. */
@media (max-width: 720px) {
  .wf-deviza { display: none }
  .wf-marca { font-size: 18px }
  .wf-brazi { width: 24px; height: 25px }
}