/*
 * En-tête du thème Discovery.
 *
 * Disposition des six zones de l'en-tête, de l'identité du site et de la
 * grille de widgets.
 *
 * Chaque zone n'est présente dans le document que si elle a du contenu : la
 * feuille n'a donc pas à masquer de zone vide, et une règle qui viserait une
 * zone absente reste sans effet.
 *
 * Les valeurs des points de rupture sont écrites en clair : la spécification
 * CSS interdit une variable dans une condition de media query.
 */


/* =============================================================
   Élément d'en-tête
   ============================================================= */

.discovery-site-header {
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-4);
    padding-block: var(--discovery-space-5);
}


/* =============================================================
   Zones
   ============================================================= */

.discovery-header-zone {
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-4);
}

/*
 * La zone qui porte l'identité du site et le menu secondaire les dispose
 * côte à côte dès que la largeur le permet, l'identité à gauche et le menu
 * aligné à l'opposé.
 */
@media (min-width: 768px) {

    .discovery-header-zone-2 {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--discovery-space-6);
    }
}


/* =============================================================
   Identité du site
   ============================================================= */

.discovery-site-branding {
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-1);
    min-width: 0;
}

.discovery-site-title {
    margin: 0;
    font-size: var(--discovery-text-2xl);
    line-height: var(--discovery-line-tight);
}

.discovery-site-title a {
    color: inherit;
    text-decoration: none;
}

.discovery-site-title a:hover,
.discovery-site-title a:focus {
    text-decoration: underline;
}

.discovery-site-description {
    margin: 0;
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}

/*
 * Le logo est un bouton ouvrant un dialogue. Sa hauteur est bornée pour
 * qu'un fichier de grande dimension n'occupe pas tout l'en-tête.
 */
.discovery-site-branding .discovery-logo img {
    max-height: var(--discovery-logo-max-height, 6rem);
    width: auto;
}


/* =============================================================
   Grille de widgets
   ============================================================= */

.discovery-header-widgets {
    display: grid;
    gap: var(--discovery-space-6);
}

@media (min-width: 768px) {

    .discovery-header-widgets {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }
}

.discovery-header-widget-zone {
    min-width: 0;
}

.discovery-widget-title {
    margin-block: 0 var(--discovery-space-2);
    font-size: var(--discovery-text-lg);
    line-height: var(--discovery-line-tight);
}