/*
 * 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 à partir de 1024 pixels, l'identité à gauche et le menu aligné
 * à l'opposé. Sous ce seuil, les parties restent empilées : la bande où
 * elles tiendraient sur une ligne sans y être à l'aise est ainsi évitée,
 * d'autant que la zone peut porter une partie de plus lorsqu'un sélecteur la
 * précède.
 *
 * Le retour à la ligne est autorisé au-delà : une partie qui ne tient pas
 * descend entière plutôt que de comprimer les autres. Sans lui, une liste de
 * sélection se réduirait à quelques caractères visibles, un nom de site long
 * ou une police agrandie par le visiteur suffisant à épuiser la largeur.
 */
@media (min-width: 1024px) {

    .discovery-header-zone-2 {
        flex-direction: row;
        flex-wrap: wrap;
        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
   =============================================================

   Le titre d'un widget relève de assets/css/content.css : le composant est
   rendu dans les zones d'en-tête, dans la colonne latérale et dans le pied
   de page, et son apparence ne relève d'aucune de ces régions en
   particulier. */

.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;
}


/* =============================================================
   Zone précédant l'identité du site
   ============================================================= */

/*
 * La zone accueille les sélecteurs et tout contenu qu'une extension y
 * accroche. Ses éléments se suivent en ligne et repassent à la ligne plutôt
 * que de se comprimer.
 */
.discovery-avant-identite-site {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--discovery-space-3);
    min-width: 0;
}

/*
 * La zone 2 porte trois enfants lorsque la zone précédant l'identité est
 * remplie : cette zone, l'identité du site, puis le menu secondaire. La
 * répartition par espacement égal les aurait éloignés les uns des autres,
 * l'identité se retrouvant au centre.
 *
 * Une marge automatique après l'identité absorbe l'espace libre avant que la
 * répartition n'opère : la zone et l'identité restent groupées au départ de
 * la ligne, le menu secondaire à l'opposé. La règle vaut aussi quand la zone
 * est absente, l'identité se retrouvant alors seule au départ.
 *
 * Le point de rupture est celui du passage en ligne. Appliquée plus tôt, la
 * marge ramènerait l'identité à la largeur de son contenu alors que la zone
 * est encore en colonne.
 */
@media (min-width: 1024px) {

    .discovery-header-zone-2 > .discovery-site-branding {
        margin-inline-end: auto;
    }
}