/**
 * Navigation — Calepin Parentalité
 *
 * Cible la barre de navigation GeneratePress.
 * Chargé sur toutes les pages.
 *
 * Prérequis côté WP Admin :
 *   → Ajouter la classe CSS "menu-item-cta" sur l'item "Référencer mon cabinet"
 *     dans Apparence → Menus (activer "Classes CSS" dans les Options de l'écran).
 *
 * @package CalepiParentalite
 */

/* ── Titre du site (branding texte) ─────────────────────────────────────────── */

.main-title,
.main-title a {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: var(--cp-graphite);
    text-decoration: none;
}
.main-title a:hover { color: var(--cp-coral); }

/* ── Liens de navigation ─────────────────────────────────────────────────────── */

.main-navigation .main-nav ul li a,
.main-navigation .main-nav ul li a:visited {
    font-family: 'Lato', sans-serif;
    font-size:   15px;
    font-weight: 400;
    color:       var(--cp-graphite);
    text-decoration: none;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.sfHover > a {
    color: var(--cp-teal);
}

.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a,
.main-navigation .main-nav ul li.current-page-ancestor > a {
    color:       var(--cp-teal);
    font-weight: 700;
}

/* ── Sous-menus dropdown ─────────────────────────────────────────────────────── */

.main-navigation ul ul {
    background:    #fff;
    border-radius: var(--cp-radius-card);
    border:        var(--cp-border) rgba(44, 44, 42, 0.12);
    box-shadow:    0 4px 16px rgba(44, 44, 42, 0.08);
}

.main-navigation ul ul li a {
    font-size: 14px;
    color:     var(--cp-graphite);
}

.main-navigation ul ul li a:hover {
    color:      var(--cp-coral);
    background: var(--cp-cream);
}

/* ── Bouton CTA "Référencer mon cabinet" ─────────────────────────────────────── */

.menu-item-cta > a,
.menu-item-cta > a:visited {
    display:       inline-flex !important;
    align-items:   center;
    background:    var(--cp-coral) !important;
    color:         #fff !important;
    border-radius: var(--cp-radius-pill) !important;
    padding:       0 22px !important;
    height:        44px;
    line-height:   1 !important;
    margin:        8px 0 8px 12px;
    font-weight:   700;
    font-size:     15px;
    transition:    background 0.18s ease;
}

.menu-item-cta > a:hover {
    background: var(--cp-orange) !important;
    color:      #fff !important;
}