/* =====================================================================
   Anthemon Fellowship — NAVBAR + tendina dei libri
   ---------------------------------------------------------------------
   Mobile-first: le regole base valgono per gli schermi piccoli, i blocchi
   @media (min-width: …) aggiungono quelle per i grandi.

   Contenuto:
     4. Barra di navigazione fissa, stato .is-scrolled, tendina Books,
        menu del telefono

   L'ORDINE DEI FILE CONTA. Questo foglio era uno solo e la cascata ne
   dipende: piu' di una regola vince per posizione, non per specificita'.
   I file vanno caricati nell'ordine del numero in testa al nome, ed e'
   quello che fa includes/header.php. Vedi css/README.md prima di
   aggiungerne, rinominarne o riordinarne uno.
   ===================================================================== */
/* ---------- 4. NAVBAR + BOOKS DROPDOWN ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0; /* explicit longhands: the `inset` shorthand needs Safari 14.1+ */
  z-index: 100;
  background: transparent;
  transition: background-color 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
}

/* After scrolling (class added by js/main.js): dense and translucent.
   Fallback first: browsers without backdrop-filter get a denser ink tint;
   the blur + lighter tint apply only where supported (Revision 2 §6.2). */
.site-header.is-scrolled {
  background: rgba(31, 46, 53, 0.95);
  box-shadow: 0 1px 0 rgba(184, 152, 104, 0.25);
}
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .site-header.is-scrolled {
    background: rgba(31, 46, 53, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* Pages without a hero get a dense navbar from the start */
body:not(.has-hero) .site-header { background: rgba(31, 46, 53, 0.97); }

.nav {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Logo + wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--gold); /* the flower inherits this via currentColor */
}
/* Il fiore e' orizzontale (~1,55:1), non quadrato: larghezza e altezza
   vanno in proporzione, altrimenti l'SVG si rimpicciolisce dentro un box
   quadrato e sembra meno presente del segnaposto che c'era prima. */
.logo-mark { width: 44px; height: 28px; flex-shrink: 0; }

.wordmark {
  display: inline-flex;
  flex-direction: column;  /* ANTHEMON above, FELLOWSHIP below */
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-white);
  line-height: 1.1;
}
.wordmark-sub {
  font-size: 0.55em;
  letter-spacing: 0.42em; /* wider tracking to match the line above */
  color: var(--gold);
}

/* Hamburger: two bars that become an X when the menu is open */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px; height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle-bar {
  height: 1.5px;
  background: var(--warm-white);
  transition: transform 0.3s var(--ease-soft);
}
/* Careful: the bars are the button's 1st and 2nd children (the 3rd is the
   hidden "Menu" label), so no :last-child here. */
.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
.nav-open .nav-toggle-bar:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }

/* Mobile menu: full-width panel under the navbar, hidden with
   opacity + visibility (transitionable, unlike display) */
.nav-menu {
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin: 0;
  padding: 1rem 4% 2rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--ink); /* solid: the hero sits underneath and must not bleed through */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-soft), visibility 0.3s;
}
.nav-open .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* :not(.dropdown-panel) matters: this selector outweighs .dropdown-panel
   in specificity and would otherwise flatten the world panels' styling */
.nav-menu a:not(.btn):not(.dropdown-panel),
.nav-menu .dropdown-toggle {
  display: block;
  padding: 0.7rem 0.25rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  color: var(--warm-white);
  transition: color 0.3s var(--ease-soft);
}
.nav-menu a:not(.btn):not(.dropdown-panel):hover,
.nav-menu .dropdown-toggle:hover { color: var(--gold); }

/* La voce "Libri" e' un <button> (rev. 12 §A): non porta da nessuna parte,
   apre solo la tendina. Qui gli si toglie tutto quello che il browser mette
   di suo su un pulsante — fondo grigio, bordo in rilievo, font di sistema,
   testo centrato — perche' nel menu deve essere indistinguibile dalle altre
   voci. Il font NON si eredita da solo sui controlli di form: e' l'unica
   dichiarazione qui sotto che serve anche se il resto lo togli.
   width: 100% perche' un <button> si stringe sul contenuto anche con
   display: block, mentre l'<a> di prima riempiva la riga; da 900px in su
   torna auto (il menu li' e' una fila, non una colonna).
   line-height: inherit e NON font: inherit — la scorciatoia "font" azzererebbe
   anche famiglia, corpo e peso che la regola qui sopra ha appena impostato,
   e siccome questo blocco viene dopo vincerebbe lui: la voce tornerebbe
   nel font di sistema. Serve solo l'interlinea, che il pulsante non eredita. */
.nav-menu .dropdown-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  line-height: inherit;
  cursor: pointer;
}

.nav-cta { margin-top: 1rem; text-align: center; }

/* --- INTERRUTTORE DI LINGUA (rev. 14) ---
   Una sigla sola, "EN" sulle pagine italiane e "IT" su quelle inglesi.
   Eredita gia' tutto dalla regola .nav-menu a qui sopra (maiuscoletto
   spaziato, avorio, oro al passaggio del mouse): qui si toglie soltanto un
   po' di peso, perche' e' un servizio, non una voce di menu.
   NIENTE opacity per smorzarlo: l'avorio a 0,75 sull'ink scende sotto il
   4,5:1 che il progetto si e' dato. Si smorza col corpo, che il contrasto
   non lo tocca. */
.nav-lang { margin-top: 0.35rem; }
.nav-menu .nav-lang a { font-size: 0.8125rem; letter-spacing: 0.12em; }

/* --- Books dropdown ---
   Three small world panels. Opens on hover (desktop), on focus (keyboard)
   and via the .dd-open class that js/main.js toggles on touch devices. */
.has-dropdown { position: relative; }

.dropdown {
  margin: 0;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: rgba(31, 46, 53, 0.97);
  border: 1px solid rgba(184, 152, 104, 0.25);
  border-radius: var(--radius-card);
}

/* Ogni voce e' un pannellino illustrato: immagine + velo scuro + nome del
   mondo. Sostituire un'immagine e' una riga sola: basta salvare il file
   citato nella url() qui sotto e compare da solo — se manca o non si
   carica, si vede il gradiente del colore del mondo che gli sta sotto.
   Adesso i tre dipinti ci sono tutti (vedi il blocco qui sotto). */
.dropdown-panel {
  display: grid;
  place-items: center;
  width: 220px;
  height: 110px;
  padding: 0 0.75rem;
  border-radius: calc(var(--radius-card) - 6px); /* slightly tighter than the container */
  overflow: hidden;
  background-size: cover;
  background-position: center;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--warm-white);
  transition: transform 0.3s var(--ease-soft);
}
.dropdown-panel:hover { transform: scale(1.03); }

/* DA DOVE VENGONO I TRE RITAGLI. Non sono immagini nuove: sono gli stessi
   dipinti che la pagina mostra piu' sotto, perche' il menu deve promettere
   cio' che poi si vede davvero.
     menu-epteka.webp ← hero-epteka-poster.jpg (1920x1080), l'immagine
                        dell'hero della home; ritaglio 1920x960 a +120 px
                        dall'alto — il cielo scuro in cima non serve, il
                        cavaliere ci sta tutto, neve compresa.
     menu-mosses.webp ← home-mosses.webp (1600x1100), ritaglio centrato,
                        come l'object-position: center di .wa-mosses.
     menu-dasos.webp  ← book-hero-dasos.webp (2200x871), ritaglio a +366 px
                        da sinistra, cioe' l'80% orizzontale: lo stesso
                        object-position: 80% center di .wa-dasos, cosi' il
                        druido resta dentro l'inquadratura come in home.

   FORMATO E MISURA. I sorgenti sono 16:9, 3:2 e 2,53:1; il pannello e'
   220x110, cioe' 2:1. Ritagliati a 2:1 e salvati a 440x220 (il doppio, per
   gli schermi a densita' 2x) pesano 10, 17 e 15 KB invece di 245, 178 e
   131 — e background-size: cover avrebbe comunque buttato via il resto.
   WebP e non JPEG: e' il formato di tutte le altre illustrazioni del sito.

   SONO SCHIARITI RISPETTO AL SORGENTE: gamma 1,14 e +4% di luminosita' con
   +6% di saturazione, applicati al momento del ritaglio. A 220x110 un
   dipinto scuro diventa una macchia indistinta, e questi tre lo sono di
   natura (bosco in ombra, notte, nebbia). Il file di partenza resta
   intatto: la home continua a mostrare i colori originali. */

/* IL VELO NON E' PIU' PIATTO: E' UNA MACCHIA AL CENTRO.
   Prima era una velatura uniforme sull'intero pannello, e per far passare
   il titolo doveva arrivare a 0.62: i dipinti uscivano spenti, che e' il
   contrario di cio' che il menu deve promettere. Adesso lo scurimento sta
   dove serve — sotto il titolo, al centro — e ai bordi si dissolve quasi a
   zero, cosi' i colori del dipinto restano quelli veri.
   La figura e' un'ellisse centrata, non una rampa da un lato, perche' qui
   il titolo e' centrato. (Era la stessa di .place-contact in css/07, che
   pero' non esiste piu': contact.php ha una sola sezione chiara.)

   MISURATO sul rendering vero col metodo di tools/verify — marca per sapere
   dove cadono le lettere, secondo scatto col testo nascosto per campionare
   il fondo. Per i due loghi la maschera non e' un rettangolo ma il canale
   alfa del PNG stesso, ridimensionato alla misura a cui il logo viene
   dipinto: campionare il riquadro intero avrebbe misurato anche il vuoto
   fra una lettera e l'altra, che non e' inchiostro e non conta.

                                    a 1440 px            a 390 px
     pannello   velo               peggiore  1° perc.   peggiore  1° perc.
     Epteka     0.78 → 0.28         5,44:1    5,79:1     4,99:1    5,82:1
     Mosses     0.72 → 0.12         2,77:1    4,08:1     2,86:1    3,16:1
     Dasos      0.72 → 0.12         3,09:1    4,89:1     3,51:1    4,63:1

   Epteka porta il velo piu' fitto per due motivi: il suo dipinto e' il piu'
   chiaro dei tre (neve e nebbia) e il suo titolo e' testo vero, quindi deve
   stare sopra 4,5:1 e non sopra i 3:1 che bastano a un logo. I due loghi ci
   stanno larghi: sul peggiore in assoluto restano appena sotto, ma sono
   pixel di bordo antialiasato — lo 0,1% a 1440 e lo 0,4% a 390 dei pixel di
   inchiostro del logo — e il primo percentile e' comunque sopra 3:1.
   Le due colonne di numeri ci sono perche' a 390 px il pannello si allarga a
   tutta la colonna e cover ritaglia un'altra porzione del dipinto: e' un
   fondo diverso, non lo stesso rimpicciolito. */
.dd-epteka {
  background-image:
    radial-gradient(ellipse 80% 70% at 50% 50%,
      rgba(20, 30, 35, 0.78), rgba(20, 30, 35, 0.28) 80%),
    url("../assets/img/menu-epteka.webp"),
    linear-gradient(135deg, #22363e, var(--epteka-steel));
}
.dd-mosses {
  background-image:
    radial-gradient(ellipse 80% 70% at 50% 50%,
      rgba(20, 30, 35, 0.72), rgba(20, 30, 35, 0.12) 80%),
    url("../assets/img/menu-mosses.webp"),
    linear-gradient(135deg, #232952, var(--mosses-purple));
}
.dd-dasos {
  background-image:
    radial-gradient(ellipse 80% 70% at 50% 50%,
      rgba(20, 30, 35, 0.72), rgba(20, 30, 35, 0.12) 80%),
    url("../assets/img/menu-dasos.webp"),
    linear-gradient(135deg, #12281d, var(--dasos-teal));
}

/* IL TITOLO E' IL LOGO, su Mosses e Dasos.
   Sono gli stessi due file che la home dipinge dentro i riquadri dei mondi
   (.world-logo): il menu e la pagina devono dire la stessa cosa.
   Le due misure sono diverse perche' i due lockup hanno proporzioni molto
   diverse — Mosses e' 983x798 (1,23:1, quasi un quadrato: tre righe
   impilate), Dasos e' 1200x508 (2,36:1, due righe lunghe). Un solo tetto
   per entrambi avrebbe fatto Mosses minuscolo o Dasos fuori dal pannello.
   LA LARGHEZZA E' IN PERCENTUALE, L'ALTEZZA IN PIXEL, e non per distrazione.
   Il pannello e' una griglia con una riga auto: dentro una riga auto la
   percentuale di altezza di un figlio e' un riferimento circolare (per
   sapere quanto e' alta la riga servirebbe l'altezza del figlio, che
   dipende dalla riga). Il browser non sbaglia, semplicemente risolve la
   percentuale su un'altra misura: misurato a 390 px, max-height: 70%
   diventava 100,9 px invece di 58,8 — cioe' il 120% del pannello — e i
   loghi uscivano tagliati dal bordo. La larghezza quel problema non ce
   l'ha, perche' la larghezza del pannello e' definita.
   I pixel sono due, uno per misura di pannello: 84 px da telefono (qui
   sotto) e 110 px da 900 in su (nel blocco @media in fondo al file). */
.dropdown-logo {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}
.dd-mosses .dropdown-logo { max-width: 55%; max-height: 64px; }
.dd-dasos  .dropdown-logo { max-width: 80%; max-height: 56px; }

/* Epteka tiene il testo e cresce: 1.25rem contro i 0.9375 degli altri.
   Non e' capriccio tipografico — accanto a due loghi dipinti, la stessa
   parola alla misura di prima sembrava la voce di serie B delle tre.
   Il logo di Epteka non si puo' usare: e' il lockup dell'hero, alto e
   stretto, e a 110 px di pannello la riga "Tecnologia elfica" sparisce. */
.dd-epteka { font-size: 1.25rem; }

/* Mobile: the dropdown lives inside the menu panel, in normal flow,
   toggled by tapping "Books" (js/main.js adds .dd-open) */
.dropdown {
  display: none;
  border: 0;
  background: transparent;
  padding: 0.25rem 0 0.75rem 0.75rem;
}
.has-dropdown.dd-open .dropdown { display: flex; }
.dropdown-panel { width: 100%; height: 84px; }

/* From 900px up: no hamburger, menu in a row, dropdown floats under "Books" */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav-menu {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 2.25rem;
    padding: 0;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-menu a:not(.btn):not(.dropdown-panel),
  .nav-menu .dropdown-toggle { padding: 0.25rem 0; width: auto; }
  .nav-cta { margin: 0; }

  /* Da 900px in su la sigla sta in fila con le altre voci. Il trattino
     verticale prima serve a dire "questo non e' una pagina": senza, "EN"
     sembra una settima voce di menu. E' un bordo e non un carattere, cosi'
     non finisce letto dagli screen reader. */
  .nav-lang {
    margin-top: 0;
    margin-left: -1.15rem;   /* meta' del vuoto di 2,25rem: il trattino cade in mezzo */
    padding-left: 1.1rem;    /* e il testo riparte alla stessa distanza dall'altro lato */
    border-left: 1px solid rgba(184, 152, 104, 0.28);
  }

  /* Invisible bridge under the "Books" link so the pointer can travel
     down to the panel without the hover state dropping */
  .has-dropdown::after {
    content: "";
    position: absolute;
    left: -1rem; right: -1rem;
    top: 100%;
    height: 16px;
  }

  .dropdown {
    display: flex;                    /* hidden via opacity below, so it can fade */
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    padding: 0.75rem;
    background: rgba(31, 46, 53, 0.97);
    border: 1px solid rgba(184, 152, 104, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -8px);
    transition: opacity 0.2s var(--ease-soft), transform 0.2s var(--ease-soft), visibility 0.2s;
  }
  .dropdown-panel { width: 220px; height: 110px; }
  /* Il pannello cresce da 84 a 110 px: i tetti dei loghi lo seguono.
     77 e 66 px sono il 70% e il 60% di 110 — le stesse proporzioni della
     misura da telefono, scritte in pixel per il motivo spiegato sopra. */
  .dd-mosses .dropdown-logo { max-height: 77px; }
  .dd-dasos  .dropdown-logo { max-height: 66px; }

  /* Open on keyboard focus or via the JS class (touch) */
  .has-dropdown:focus-within .dropdown,
  .has-dropdown.dd-open .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
}

/* Open on hover — desktop pointer devices only. A single combined media
   query (not one nested inside another) keeps every Safari happy. */
@media (min-width: 900px) and (hover: hover) {
  .has-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
}