/**
 * Header Fixes - Design System Compliance
 *
 * Corrections pour respecter les ratios et équilibres du design system
 *
 * Problèmes corrigés:
 * 1. Logo WordPress trop petit (48px → 64px hauteur)
 * 2. Site title typography (Fraunces 24px bold)
 * 3. Navigation items size (16px → 18px)
 * 4. Spacing équilibré logo/nav
 *
 * Version: 1.0.0
 */

/* ============================================
   LOGO WORDPRESS - SITE TITLE
   ============================================ */

/* Container du logo */
.site-logo,
.wp-block-group.site-logo {
  display: flex;
  align-items: center;
  gap: 1rem; /* Espace entre icône et texte */
}

/* Logo icon WordPress */
.wp-block-site-logo {
  margin: 0 !important;
}

.wp-block-site-logo img,
.wp-block-site-logo .custom-logo {
  width: 200px !important; /* Logo GRAND 200px */
  height: auto;
  display: block;
}

/* Site title (texte CLÉMENCE FOUQUET) */
.wp-block-site-title {
  margin: 0 !important;
  line-height: 1.2;
}

.wp-block-site-title a {
  /* Typography - Fraunces serif élégant */
  font-family: 'Fraunces', serif;
  font-size: 1.5rem; /* 24px - taille impactante */
  font-weight: 700;
  letter-spacing: 0.02em;

  /* Couleur - Violet primary */
  color: #5b2e7f; /* violet-500 from design system */

  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.wp-block-site-title a:hover,
.wp-block-site-title a:focus {
  color: #f89420; /* orange-500 on hover */
  transform: translateY(-1px);
}

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

/* ============================================
   NAVIGATION - SIZE ADJUSTMENTS
   ============================================ */

/* Navigation items - Plus grands, plus lisibles */
.wp-block-navigation__container .wp-block-navigation-item a,
.nav-link {
  font-size: 1.125rem !important; /* 18px au lieu de 16px */
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Améliorer l'espacement visuel */
.wp-block-navigation__container {
  gap: 2.5rem !important; /* Augmenté de 2rem à 2.5rem */
}

.wp-block-navigation-item {
  margin: 0 !important;
}

/* ============================================
   HEADER CONTAINER - BALANCE
   ============================================ */

/* Équilibrer logo et navigation */
.header-container {
  gap: 3rem; /* Espace entre logo et nav */
}

/* Assurer que le logo ne se comprime pas */
.site-logo {
  flex-shrink: 0;
  min-width: max-content;
}

/* ============================================
   RESPONSIVE - LOGO MOBILE
   ============================================ */

@media screen and (max-width: 767px) {
  .wp-block-site-logo img,
  .wp-block-site-logo .custom-logo {
    width: 150px !important; /* Mobile: 150px */
  }

  .wp-block-site-title a {
    font-size: 1.25rem; /* Mobile: 20px au lieu de 24px */
  }
}

@media screen and (max-width: 480px) {
  .wp-block-site-logo img,
  .wp-block-site-logo .custom-logo {
    width: 120px !important;
  }

  .wp-block-site-title a {
    font-size: 1.125rem; /* Small mobile: 18px */
  }

  .site-logo {
    gap: 0.75rem; /* Réduire gap logo/texte */
  }
}

/* ============================================
   COLOR CONTRAST - WCAG AA COMPLIANCE
   ============================================ */

/* Vérifier que texte violet sur beige respecte WCAG AA */
/* Ratio: #5b2e7f sur #fdf1dd = 6.12:1 ✅ (> 4.5:1) */

.site-header {
  /* Assurer contraste minimum */
  --menu-link-color: #44403c; /* gray-700 = 8.59:1 sur beige ✅ */
  --logo-color: #5b2e7f; /* violet-500 = 6.12:1 sur beige ✅ */
}

/* ============================================
   PRINT FIXES
   ============================================ */

@media print {
  .wp-block-site-title a {
    color: #000;
  }

  .wp-block-site-logo {
    display: none; /* Masquer icône en impression */
  }
}