/*
 * Navigations du thème Discovery.
 *
 * Menus rendus en boutons, barres d'onglets, sous-menus et liens
 * d'évitement.
 *
 * L'état sélectionné et l'élément courant ne reposent jamais sur la seule
 * couleur : chacun est doublé d'une bordure et d'une graisse, ce que le
 * critère WCAG 2.1 1.4.1 impose pour toute information transmise
 * visuellement.
 *
 * Les valeurs des points de rupture sont écrites en clair : la spécification
 * CSS interdit une variable dans une condition de media query.
 */


/* =============================================================
   Listes de menu
   ============================================================= */

/*
 * Le retrait des puces s'accompagne du rôle de liste porté par l'élément :
 * sous certains moteurs, retirer le style de liste supprime la sémantique
 * restituée par les lecteurs d'écran, qui n'annoncent alors plus ni la
 * nature de liste ni le nombre d'éléments.
 */
.discovery-menu,
.discovery-sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.discovery-menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--discovery-space-2);
    align-items: center;
}

.discovery-menu-item {
    position: relative;
}


/* =============================================================
   Menus en boutons
   ============================================================= */

.discovery-menu-button {
    display: inline-flex;
    align-items: center;
    padding: var(--discovery-space-2) var(--discovery-space-3);
    color: var(--discovery-color-text);
    font: inherit;
    text-align: start;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--discovery-radius-sm);
    cursor: pointer;
}

.discovery-menu-button:hover,
.discovery-menu-button:focus-visible {
    border-color: var(--discovery-color-border);
}

/*
 * L'élément menant au document affiché est signalé par une bordure basse et
 * une graisse plus forte, en plus de sa couleur.
 */
.discovery-menu-button[aria-current] {
    color: var(--discovery-color-link);
    font-weight: 600;
    border-block-end-color: currentColor;
}

/* Élément de menu dépourvu d'adresse, rendu en texte simple. */
.discovery-menu-label {
    display: inline-block;
    padding: var(--discovery-space-2) var(--discovery-space-3);
    color: var(--discovery-color-muted);
}


/* =============================================================
   Barres d'onglets
   ============================================================= */

.discovery-menu-tabs {
    gap: 0;
    border-block-end: 1px solid var(--discovery-color-border);
}

.discovery-tab-item {
    margin-block-end: -1px;
}

.discovery-tab {
    display: inline-flex;
    align-items: center;
    padding: var(--discovery-space-3) var(--discovery-space-4);
    color: var(--discovery-color-text);
    font: inherit;
    background: none;
    border: 1px solid transparent;
    border-block-end-width: 3px;
    cursor: pointer;
}

.discovery-tab:hover,
.discovery-tab:focus-visible {
    border-block-end-color: var(--discovery-color-border);
}

/*
 * L'onglet sélectionné porte une bordure basse épaisse et une graisse plus
 * forte : sa couleur seule ne suffirait pas à le distinguer.
 */
.discovery-tab[aria-selected="true"] {
    color: var(--discovery-color-link);
    font-weight: 600;
    border-block-end-color: currentColor;
}

/* Onglet signalé comme indisponible. */
.discovery-tab[aria-disabled="true"] {
    color: var(--discovery-color-muted);
    cursor: default;
}


/* =============================================================
   Sous-menus
   ============================================================= */

/*
 * Les sous-menus sont dépliés dans le flux du document. Aucun mécanisme de
 * survol ne les masque : un contenu qui n'apparaît qu'au passage du pointeur
 * est inatteignable au clavier comme au toucher.
 */
.discovery-sub-menu {
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-1);
    padding-inline-start: var(--discovery-space-4);
    border-inline-start: 1px solid var(--discovery-color-border);
}


/* =============================================================
   Navigations nommées
   ============================================================= */

.discovery-primary-navigation,
.discovery-header-buttons-navigation,
.discovery-footer-primary-navigation,
.discovery-footer-info-navigation,
.discovery-footer-extra-navigation {
    min-width: 0;
}

.discovery-primary-navigation:focus,
.discovery-main:focus,
.discovery-site-footer:focus {
    outline: none;
}


/* =============================================================
   Liens d'évitement
   ============================================================= */

/*
 * Les liens d'évitement sont masqués par la classe de masquage accessible et
 * révélés au focus clavier. Cette règle ne fixe que leur apparence une fois
 * révélés : la mécanique de masquage relève de la feuille principale.
 */
.discovery-skip-links {
    position: relative;
    z-index: 100;
}

.discovery-skip-link:focus {
    display: inline-block;
    padding: var(--discovery-space-3) var(--discovery-space-4);
    color: var(--discovery-color-text);
    background-color: var(--discovery-color-surface);
    border: 1px solid var(--discovery-color-border);
    border-radius: var(--discovery-radius-sm);
}


/* =============================================================
   Pagination et navigation entre contenus
   ============================================================= */

.discovery-pagination .nav-links,
.discovery-post-navigation .nav-links,
.discovery-comments-navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--discovery-space-3);
    align-items: center;
}

.discovery-pagination,
.discovery-post-navigation,
.discovery-comments-navigation {
    margin-block-start: var(--discovery-space-8);
    padding-block-start: var(--discovery-space-4);
    border-block-start: 1px solid var(--discovery-color-border);
}

.discovery-pagination .current {
    font-weight: 600;
    text-decoration: underline;
}