/**
 * Menu CTA – "Devis gratuit"
 * Fichier : assets/css/menu-cta.css
 *
 * Usage : ajouter la classe CSS `menu-cta` à l'item de menu Contact
 * dans Apparence > Menus (Options de l'écran > Classes CSS).
 */

/* ===================================================================
   CTA — Desktop (header.php + dynamic-header)
   =================================================================== */

/*
 * L'item <li> avec la classe `menu-cta` est isolé visuellement.
 * Un margin-left auto pousse le CTA à droite quand la nav est flex,
 * mais puisque la nav globale gère déjà l'espacement, on utilise
 * simplement un margin-left conséquent pour l'isoler des autres items.
 */
.main-navigation ul li.menu-cta,
.site-navigation ul li.menu-cta {
    margin-left: clamp(16px, 2vw, 32px);
}

/* Le lien lui-même devient un bouton pill */
.main-navigation ul li.menu-cta > a,
.site-navigation ul li.menu-cta > a {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;

    background-color: var(--color-primary);
    color: var(--color-text-light, #ffffff) !important;
    padding: 0.55rem 1.4rem;
    border-radius: 100px;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none !important;
    border: 2px solid transparent;
    transition:
        background-color var(--transition-base, 0.2s ease),
        color var(--transition-base, 0.2s ease),
        border-color var(--transition-base, 0.2s ease),
        box-shadow var(--transition-base, 0.2s ease);
}

/* Flèche en pseudo-élément ::after */
.main-navigation ul li.menu-cta > a::after,
.site-navigation ul li.menu-cta > a::after {
    content: '\2192'; /* → */
    font-size: 1em;
    line-height: 1;
    /* Réinitialise le pseudo-élément chevron hérité du menu parent */
    display: inline;
    width: auto;
    height: auto;
    border: none;
    transform: none;
    margin-top: 0;
    transition: transform var(--transition-base, 0.2s ease);
}

/* Hover state */
.main-navigation ul li.menu-cta > a:hover,
.site-navigation ul li.menu-cta > a:hover {
    background-color: var(--color-primary-dark, #4B9925);
    color: #ffffff !important;
    text-decoration: none !important;
}

.main-navigation ul li.menu-cta > a:hover::after,
.site-navigation ul li.menu-cta > a:hover::after {
    transform: translateX(3px);
}

/* Focus visible – WCAG AA */
.main-navigation ul li.menu-cta > a:focus-visible,
.site-navigation ul li.menu-cta > a:focus-visible {
    outline: 3px solid var(--color-primary, #53AA29);
    outline-offset: 3px;
    background-color: var(--color-bg-dark, #0B1D28);
    color: #ffffff !important;
}

/* Neutraliser le focus générique du header (défini dans header-footer.css)
   pour ne pas avoir deux styles de focus superposés */
.site-header .main-navigation ul li.menu-cta > a:focus,
.site-header .site-navigation ul li.menu-cta > a:focus {
    outline: none; /* géré par :focus-visible ci-dessus */
}

/* current-menu-item : conserver l'apparence CTA même sur la page Contact */
.main-navigation ul li.menu-cta.current-menu-item > a,
.site-navigation ul li.menu-cta.current-menu-item > a {
    /* background-color: var(--color-bg-dark, #0B1D28); */
    color: var(--color-text-light, #ffffff) !important;
}

/* Supprimer le soulignement hover hérité */
.main-navigation ul li.menu-cta > a:hover,
.main-navigation ul li.menu-cta > a:focus,
.site-navigation ul li.menu-cta > a:hover,
.site-navigation ul li.menu-cta > a:focus {
    text-decoration: none;
}

/* ===================================================================
   DYNAMIC HEADER – surcharges spécifiques au `.dynamic-header`
   =================================================================== */

/*
 * Dans dynamic-header.php, le menu desktop est dans `.site-navigation`
 * et le mobile dans `.site-navigation-dropdown`. Le CTA dans le
 * dropdown mobile suit les règles ci-dessous (section MOBILE).
 */

/* ===================================================================
   RESPONSIVE – Mobile
   =================================================================== */

@media (max-width: 768px) {

    /*
     * Sur mobile, l'item `.menu-cta` est dans le menu burger.
     * On le distingue visuellement à l'intérieur du dropdown
     * mais on l'affiche également dans le header à côté du burger.
     *
     * Puisque le header.php du child theme gère le burger séparément
     * du menu, le CTA reste dans la liste déroulante – ce qui est
     * le comportement attendu (visible dans le dropdown, pas dupliqué).
     */

    /* Réinitialiser la marge gauche excessive du desktop */
    .main-navigation ul li.menu-cta,
    .site-navigation ul li.menu-cta {
        margin-left: 0;
    }

    /* Adapter le padding du lien pour la liste mobile */
    .main-navigation ul li.menu-cta > a,
    .site-navigation ul li.menu-cta > a {
        display: inline-flex;
        padding: 0.5rem 1.1rem;
        font-size: 0.875rem;
        margin-top: 8px;
    }

    /* Retirer la bordure bottom héritée des li de menu mobile */
    .main-navigation ul li.menu-cta,
    .site-navigation ul li.menu-cta {
        border-bottom: none !important;
    }
}