/**
 * Vellao Branding — CSS d'application du logo SVG sur les éléments .vellao-logo
 *
 * Approche : on cache le texte "vellao" et on affiche le SVG via background-image.
 * Le texte reste accessible pour les screen readers (text-indent ne désactive pas a11y).
 */

/* Logo principal — sur fond sombre (header par défaut) */
.vellao-logo,
.logo,
a.vellao-logo,
.site-header-inner > a:first-child {
  display: inline-block;
  width: 130px;
  height: 36px;
  background-image: url('vellao-logo.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  /* Les pseudos-éléments ::before (le triangle ▲ ajouté par les CSS existants) doivent être cachés */
}

/* Cacher les ::before contenant ▲ ajoutés par les CSS Vellao d'origine */
.vellao-logo::before,
.logo::before,
.site-header-inner > a:first-child::before {
  display: none !important;
  content: none !important;
}

/* Variante mobile / petites tailles */
@media (max-width: 600px) {
  .vellao-logo,
  .logo,
  a.vellao-logo,
  .site-header-inner > a:first-child {
    width: 110px;
    height: 30px;
  }
}

/* Hover effet subtil */
.vellao-logo:hover,
.logo:hover,
a.vellao-logo:hover,
.site-header-inner > a:first-child:hover {
  opacity: 0.85;
  transition: opacity 0.15s ease;
}