/* Barra in alto, percorso, titolo di pagina e footer, condivisi da tutte le pagine.
   Barra e footer si scrivono in site/partials/ e li inserisce site/build-partials.js.

   Portano con se' colori, carattere e larghezza, cosi' si vedono identici sia
   sulle pagine che usano home.css sia su quelle che usano talents.css, senza
   dipendere dalle variabili di nessuna delle due. Le pagine delle classi, per
   esempio, cambiano --accent col colore della classe: qui non deve succedere.
   Per questo i colori hanno il prefisso chrome-, che nessuna pagina ridefinisce. */

:root {
    --chrome-ink: #f2e9d8;
    --chrome-mute: #838c96;
    --chrome-line: #22262b;
    --chrome-accent: #d2b48c;
}

.topbar,
.sitefoot {
    --chrome-gutter: 1.5rem;

    font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
    line-height: 1.65;
}

/* stesso asse di allineamento della homepage, su qualunque pagina */
.topbar > .wrap,
.sitefoot > .wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--chrome-gutter);
}

/* ------------------------------------------------------------- barra alta */

.topbar { border-bottom: 1px solid var(--chrome-line); color: var(--chrome-mute); }

.topbar > .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem 1rem; min-height: 58px; flex-wrap: wrap;
}

.topbar .mark {
    font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--chrome-mute); text-decoration: none; white-space: nowrap;
}

.topbar .mark:hover { color: var(--chrome-ink); }

.topbar nav { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }

.topbar nav a {
    font-size: .86rem; color: var(--chrome-mute); text-decoration: none;
    padding: .4rem 0; border-bottom: 1px solid transparent;
}

.topbar nav a:hover { color: var(--chrome-ink); border-bottom-color: var(--chrome-accent); }

/* la voce della pagina in cui ti trovi (aria-current lo mette build-partials.js) */
.topbar nav a[aria-current] { color: var(--chrome-ink); border-bottom-color: var(--chrome-accent); }

/* ------------------------------------------ percorso e titolo di pagina
   Uguali su tutte le pagine interne, sul modello di accessibility.html:
   il percorso "Azmar Quest / ..." 2rem sotto la barra, poi titolo e
   introduzione. Le pagine dei talenti e accessibility hanno gia' lo stacco in
   alto da .page; le altre mettono il percorso in un div.crumbbar prima di <main>. */

.crumbbar { padding-top: 2rem; }

.topnav { font-size: .85rem; line-height: 1.5; color: var(--chrome-mute); margin: 0 0 1.7rem; }
.topnav a { color: var(--chrome-mute); text-decoration: none; }
.topnav a:hover { color: var(--chrome-accent); text-decoration: underline; }
/* la barra fra le voci: sbiadita, e con aria-hidden lo screen reader non legge "slash" */
.topnav span { opacity: .45; margin: 0 .45rem; }

.pagehead { margin: 0 0 2.25rem; }

/* interlinea 1.2 e non quella del testo: un titolo su due righe resta compatto */
.pagehead h1 {
    margin: 0 0 .9rem; font-size: 2rem; font-weight: 600;
    line-height: 1.2; letter-spacing: normal; color: var(--chrome-ink);
}

.pagehead .intro {
    margin: 0; font-size: 1.05rem; line-height: 1.6;
    color: var(--chrome-ink); max-width: 62ch;
}

/* ------------------------------------------------------------------ footer */

.sitefoot {
    padding: 3rem 0 3.6rem; font-size: .88rem; color: var(--chrome-mute);
    border-top: 1px solid var(--chrome-line);
}

.sitefoot h2 {
    font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--chrome-mute); margin: 0 0 .9rem; font-weight: 600;
    border: 0; padding: 0;
}

.sitefoot .cols {
    display: grid; gap: 1.6rem 2.5rem;
    grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 2.2rem;
}

.sitefoot ul { list-style: none; margin: 0; padding: 0; }
.sitefoot li { margin: 0 0 .6rem; line-height: 1.35; }
.sitefoot a { color: var(--chrome-mute); text-decoration: none; }
.sitefoot a:hover { color: var(--chrome-accent); }
.sitefoot p { margin: 0; color: var(--chrome-mute); }
.sitefoot .made { border-top: 1px solid var(--chrome-line); padding-top: 1.5rem; }
.sitefoot .made a { color: var(--chrome-accent); text-decoration: underline; text-underline-offset: 2px; }

/* ----------------------------------------------------------------- tablet */

@media (max-width: 900px) {
    .sitefoot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- telefono */

@media (max-width: 620px) {
    .topbar, .sitefoot { --chrome-gutter: 1.15rem; }
}

/* sotto i 381 pixel le colonne prendono la larghezza delle voci invece di
   dividersi a meta': "Report a security issue" e le altre voci legali
   restano su una riga */
@media (max-width: 380px) {
    .sitefoot .cols { grid-template-columns: auto auto; column-gap: 1rem; }
}

/* La barra passa alla versione compatta un po' prima dei margini: fra 621 e
   680 pixel, con caratteri piu' larghi di quello di Windows (Arial, Verdana su
   Mac e Linux), la versione completa andava a capo. */
@media (max-width: 680px) {
    /* la dicitura AZMAR QUEST si toglie per liberare la riga alle voci di menu:
       la home ha il logo subito sotto, le altre pagine il percorso "Azmar Quest / ..." */
    .topbar .mark { display: none; }
    .topbar > .wrap { min-height: 0; padding-top: .5rem; padding-bottom: .5rem; justify-content: center; }
    .topbar nav { gap: .1rem 1.05rem; justify-content: center; }
    .topbar nav a { font-size: .84rem; }
}

/* ---------- il menu sul telefono ----------
   Su desktop ci stanno tutte e sei. Su schermo stretto no, e la barra
   raddoppia di altezza: si tolgono partendo dalle voci meno utili, Talents
   (opt-1) e poi Community (opt-2). La FAQ resta sempre: risponde alle domande
   che bloccano il download.
   Le voci si riconoscono dalle classi opt-1, opt-2 e opt-3 in
   site/partials/topbar.html, non dall'indirizzo, cosi' l'indirizzo puo'
   cambiare senza rompere il menu. */

@media (max-width: 620px) {
    .topbar nav .opt-1 { display: none; }
}

@media (max-width: 380px) {
    .topbar nav .opt-2 { display: none; }
}

/* Sulle pagine dei talenti la voce evidenziata e' proprio Talents: resta
   visibile e al suo posto si toglie Community, e sotto i 381 pixel anche
   Changelog (opt-3). Il browser che non conosce :has fa come sulle altre pagine. */
@media (max-width: 620px) {
    .topbar nav:has(.opt-1[aria-current]) .opt-1 { display: block; }
    .topbar nav:has(.opt-1[aria-current]) .opt-2 { display: none; }
}

@media (max-width: 380px) {
    .topbar nav:has(.opt-1[aria-current]) .opt-3 { display: none; }
}