/**
 * Vinabox — Fix menu mobile : rendre les dropdowns visibles + cliquables.
 *
 * Problème identifié : sur mobile, les flèches `.dropdown-menu-toggle` de
 * GeneratePress Free sont trop petites (zone de tap <40px) et peu contrastées,
 * l'utilisateur ne comprend pas qu'il peut ouvrir les sous-menus.
 *
 * Solution CSS-only (pas de JS ajouté) :
 *  1. Élargir la zone de tap à 48x48 (standard Apple HIG 44px + marge)
 *  2. Augmenter la taille de la flèche et son contraste
 *  3. Animer la rotation de la flèche quand le sous-menu est ouvert
 *  4. Surligner le li parent quand sub-menu actif
 *  5. Style du sub-menu ouvert : indentation + fond différencié
 *
 * Scope : uniquement en mobile (<= 768px, breakpoint nav GP par défaut).
 * Réversible : supprimer ce fichier + l'enqueue dans functions.php.
 *
 * Date : 2026-04-20 — vinabox-ui-ux-dev
 */

@media (max-width: 768px) {

  /* 1. Flèche de toggle — zone de tap large + visuel fort */
  .main-navigation .menu li.menu-item-has-children > a .dropdown-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 !important;
    padding: 0 !important;
    float: right;
    color: #61262A;
    background: rgba(97, 38, 42, 0.06);
    border-radius: 50%;
    transition: transform 0.25s ease, background 0.2s ease;
    /* Empêche le lien parent de capturer le click sur la flèche */
    position: relative;
    z-index: 2;
  }

  .main-navigation .menu li.menu-item-has-children > a .dropdown-menu-toggle:hover,
  .main-navigation .menu li.menu-item-has-children > a .dropdown-menu-toggle:focus {
    background: rgba(97, 38, 42, 0.15);
  }

  .main-navigation .menu li.menu-item-has-children > a .dropdown-menu-toggle svg {
    width: 16px;
    height: 16px;
    /* La flèche GP pointe vers le bas par défaut au top level,
       vers la droite pour les sous-niveaux. Rotation gérée séparément. */
  }

  /* 2. Rotation de la flèche quand sub-menu ouvert (classe GP : sfHover) */
  .main-navigation .menu li.menu-item-has-children.sfHover > a .dropdown-menu-toggle {
    background: rgba(97, 38, 42, 0.18);
    transform: rotate(180deg);
  }

  /* Les sous-niveaux ont une flèche "arrow-right" (vers la droite) : rotation 90° au lieu de 180° */
  .main-navigation .menu .sub-menu li.menu-item-has-children > a .dropdown-menu-toggle svg {
    /* Reset pour les items imbriqués : flèche vers la droite → rotation vers le bas quand ouvert */
  }
  .main-navigation .menu .sub-menu li.menu-item-has-children.sfHover > a .dropdown-menu-toggle {
    transform: rotate(90deg);
  }

  /* 3. Items de menu : meilleure lisibilité en mobile */
  .main-navigation .main-nav ul li.menu-item-has-children > a {
    /* Padding-right agrandi pour que le texte ne touche pas la flèche */
    padding-right: 60px !important;
    position: relative;
  }

  /* 4. Surligner le li parent actif (sub-menu ouvert) */
  .main-navigation .menu li.menu-item-has-children.sfHover > a {
    background: rgba(97, 38, 42, 0.04);
    color: #61262A;
  }

  /* 5. Sub-menu ouvert : indentation + fond distinct pour bien montrer la hiérarchie */
  .main-navigation .menu .sub-menu {
    background: #f7f8f9 !important;
    border-left: 3px solid #61262A;
    margin-left: 0;
  }

  .main-navigation .menu .sub-menu li a {
    padding-left: 24px !important;
  }

  .main-navigation .menu .sub-menu .sub-menu li a {
    padding-left: 40px !important;
    background: #f0f0f0 !important;
  }

  .main-navigation .menu .sub-menu .sub-menu .sub-menu li a {
    padding-left: 56px !important;
    background: #eaeaea !important;
  }

  /* 6. Animation d'ouverture du sub-menu (doux) */
  .main-navigation .menu li.menu-item-has-children > .sub-menu {
    transition: max-height 0.3s ease, opacity 0.25s ease;
  }

  /* 7. Zone de tap minimum 48px sur TOUS les items mobile (A11y + Google UX) */
  .main-navigation .main-nav ul li a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* 8. Fix flèche top-level qui peut chevaucher le texte si menu long */
  .main-navigation .main-nav > ul > li > a {
    line-height: 1.3;
  }
}