/**
 * Header Final Fixes - Corrections UX
 *
 * Problèmes corrigés:
 * 1. Site title visible (on n'en veut pas, seulement logo)
 * 2. Logo trop petit (force 64px)
 * 3. Bandeau beige ne fait pas toute la largeur (max-width limiting)
 *
 * Version: 1.0.0
 * Date: 9 novembre 2025
 */

/* ============================================
   FIX 1: MASQUER SITE TITLE
   ============================================ */

/* On veut SEULEMENT le logo, PAS le texte "Clémence Fouquet" */
.site-header .wp-block-site-title {
  display: none !important;
}

/* Alternative: Si on veut garder pour SEO mais masquer visuellement */
.site-header .wp-block-site-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
   FIX 2: LOGO TAILLE FORCÉE
   ============================================ */

/* Forcer la taille du logo à 200px (important pour surcharger inline styles) */
.site-header .wp-block-site-logo {
  width: 200px !important;
  height: auto !important;
  min-width: 200px !important;
  max-width: 200px !important;
}

.site-header .wp-block-site-logo img,
.site-header .wp-block-site-logo .custom-logo {
  width: 200px !important;
  height: auto !important;
  min-width: 200px !important;
  max-width: 200px !important;
  object-fit: contain;
}

/* Container logo sans gap (puisque pas de texte) */
.site-header .site-logo {
  gap: 0 !important;
}

/* ============================================
   FIX 3: HEADER FULL-WIDTH
   ============================================ */

/* Header doit aller d'un bord à l'autre de l'écran */
.site-header {
  width: 100% !important;
  max-width: 100% !important;
}

/* Container header: enlever max-width, ajouter padding latéral */
.site-header .header-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* Wrapper header: distribuer logo (gauche) et nav (droite) */
.site-header .header-wrapper {
  width: 100% !important;
  max-width: 1280px; /* Contenu centré mais header full-width */
  margin: 0 auto;
  justify-content: space-between !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media screen and (max-width: 1024px) {
  .site-header .header-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media screen and (max-width: 767px) {
  .site-header .header-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Logo proportionnel sur mobile */
  .site-header .wp-block-site-logo {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }

  .site-header .wp-block-site-logo img {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }
}

@media screen and (max-width: 480px) {
  /* Logo encore plus petit sur très petit écran */
  .site-header .wp-block-site-logo {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
  }

  .site-header .wp-block-site-logo img {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
  }
}

/* ============================================
   NAVIGATION ADJUSTMENTS
   ============================================ */

/* Assurer que la nav reste à droite */
/* .site-header .site-nav,
.site-header .wp-block-navigation {
  margin-left: auto;
} */
/* Commenté pour rapprocher logo et navigation */

/* Navigation items - Garder les styles existants */
.site-header .wp-block-navigation__container {
  gap: 2.5rem !important;
}

.site-header .wp-block-navigation-item a {
  font-size: 1.125rem !important;
  font-weight: 500;
  color: #44403c; /* gray-700 */
}

.site-header .wp-block-navigation-item a:hover {
  color: #f89420; /* orange-500 */
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus visible pour navigation */
.site-header .wp-block-navigation-item a:focus-visible {
  outline: 2px solid #f89420;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Logo clickable area */
.site-header .wp-block-site-logo a {
  display: block;
  width: 100%;
  height: 100%;
}

.site-header .wp-block-site-logo a:focus-visible {
  outline: 2px solid #f89420;
  outline-offset: 4px;
  border-radius: 8px;
}