/* Override CSS — Masquer menus + repositionner logo sur menu Blog */
/* Hack temporaire via mod_substitute, à retirer au prochain rebuild propre */

/* ═══════════════════════════════════════════════════════════
   1. Masquer ENTIÈREMENT le header principal
   (le lang-switch sera déplacé dans le subnav via JS)
   ═══════════════════════════════════════════════════════════ */

header.header > div.max-w-7xl {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   2. Subnav blog (barre catégories) — avec logo injecté
   ═══════════════════════════════════════════════════════════ */

.blog-subnav {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: rgba(250, 250, 254, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--color-cloud, #E5E7EB) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}

/* Logo injecté via pseudo-element — taille 48px (standard navbar compact 2026) */
.blog-subnav::before {
  content: "" !important;
  display: block !important;
  width: 56px !important;
  height: 48px !important;
  background-image: url('/images/vhealthy-logo.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  flex-shrink: 0 !important;
  margin-left: 1.25rem !important;
  align-self: center !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}

/* Ajuster hauteur subnav pour accommoder logo 48px + padding confortable */
.blog-subnav {
  min-height: 64px !important;
}

.blog-subnav:hover::before {
  transform: scale(1.05) !important;
}

/* Nav des catégories centrée, prend le reste de la largeur */
.blog-subnav > nav,
.blog-subnav > div {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0.5rem 1rem !important;
}

/* Lang switch injecté en fin de subnav (par JS) */
.blog-subnav .lang-switch-injected {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  margin-right: 1rem !important;
  margin-left: auto !important;
  padding: 0.25rem 0.75rem !important;
  border: 1px solid var(--color-cloud, #E5E7EB) !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--color-slate, #64748B) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}
.blog-subnav .lang-switch-injected:hover {
  color: var(--color-orchid, #C080C0) !important;
  border-color: var(--color-orchid, #C080C0) !important;
}

/* ═══════════════════════════════════════════════════════════
   3. Mobile adjustments
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .blog-subnav {
    display: flex !important;
  }
  .blog-subnav::before {
    width: 44px !important;
    height: 40px !important;
    margin-left: 0.75rem !important;
  }
  .blog-subnav {
    min-height: 56px !important;
  }
  header .lang-switch {
    margin-right: 0.5rem !important;
  }
}