/* Reset e base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lato', Arial, sans-serif; /* Sostituito Roboto con Lato */
}

body {
  background-color: #242c2c; /* Nero assoluto per lo sfondo */
  color: #fff;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Topbar */
.topbar {
  height: 60px;
  width: 100%;
  background-color: #242c2c; 
  display: flex;
  align-items: center;
  padding: 0 20px;
  flex-shrink: 0; /* Impedisce alla topbar di restringersi */
}

.topbar-logo {
    /* Imposta l'altezza desiderata per adattarsi alla tua topbar */
    height: 60px; 
    
    /* Questo assicura che la larghezza si adatti senza deformare l'immagine */
    width: auto; 
    
    /* Opzionale: evita che l'immagine superi la larghezza del contenitore su schermi piccoli */
    max-width: 100%; 
    
    display: block;
}

/* Layout principale */
.main {
    display: flex;
    flex: 1;
    /* Era 1%: distanza tra menu effetti (.leftbar) e tool (.content), oltre
       che tra .content e le ads (.rightbar). Ridotta per avvicinare il menu
       al tool; la separazione visiva verso le ads ora la fa il bordo
       sinistro di .rightbar (vedi sotto), non più la distanza. */
    gap: 0.5%;
    padding: 0 1%;
    overflow: hidden;
    /* Assicura che il main occupi tutto lo spazio tra topbar e fondo pagina */
    height: calc(100vh - 60px);
}

/* Stile comune per i pannelli (Cards) */
.panel {
  background-color: #2c3737; /* Grigio scuro tipico delle interfacce dark */
  border-radius: 20px; /* Bordi molto arrotondati */
  padding: 20px;
  overflow-y: auto;
}

/* Left e Content */
.leftbar {
    width: 15%; /* ad esempio 15% della larghezza della main */
    min-width: 150px; /* garantiamo un minimo accettabile per le icone */
    max-width: 300px; /* opzionale per non farla diventare enorme */
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.content {
    flex: 1;
    min-width: 0; /* senza questo un flex item non si restringe sotto il
                     "max-content" dei figli: con 4 riquadri in .effect-grid
                     (auto-fit) il pannello smetteva di restringersi e il
                     4° usciva dal bordo invece di andare a capo */
    display: flex;
    flex-direction: column;
}

/* Titolo H1 compatto sopra il tool (pagine effetto).
   Nessun max-width: deve allinearsi esattamente al bordo di #effect-mount. */
.fx-title {
    flex-shrink: 0;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
}

/* Blocco testo descrittivo/crawlabile: sotto il tool nelle pagine effetto, sopra la griglia in home */
.seo-intro {
    flex-shrink: 0;
    max-width: 900px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.seo-intro h1 {
    font-family: 'Lato', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
}
.seo-intro p {
    font-size: 14px;
    color: #ccd6d6;
    margin-bottom: 10px;
}

/* Testo descrittivo sotto il tool nelle pagine effetto.
   Nessun max-width: deve allinearsi esattamente al bordo di #effect-mount,
   altrimenti va a capo prima e sembra disallineato rispetto al tool sopra. */
.seo-intro-below {
    flex-shrink: 0;
    line-height: 1.6;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #333c3c;
}
.seo-intro-below p {
    font-size: 14px;
    color: #ccd6d6;
    margin-bottom: 10px;
}

/* Guida parametri per-effetto (sezione "Parameter Guide" sotto l'intro):
   h2 unico per il titolo di sezione, h3 per ogni singolo parametro. */
.seo-intro-below h2 {
    font-family: 'Lato', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    margin-top: 30px;
    margin-bottom: 14px;
}
.seo-intro-below h3 {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #0ff;
    margin-top: 20px;
    margin-bottom: 6px;
}

/* Contenitore del tool interattivo dentro le pagine effetto.
   min-height fissato (560px, come min-height:380px già usato sotto i
   768px): senza un pavimento, un fratello flex-shrink:0 molto alto — come
   .seo-intro-below ora che contiene la guida parametri estesa — vince
   sempre la distribuzione dello spazio flex e schiaccia il tool fino quasi
   a zero invece di far scorrere il pannello. Con il pavimento, è il
   pannello (.panel { overflow-y:auto }) a scorrere sotto al tool, che resta
   sempre a un'altezza usabile. overflow:hidden resta: ogni tool gestisce da
   sé l'overflow interno in base all'altezza che gli viene data. */
#effect-mount {
    flex: 1;
    min-height: 560px;
    overflow: hidden;
    display: flex;
}

/* Overtones Generator: +150px rispetto alla base (560 -> 710), su richiesta
   esplicita dell'utente (prima +200 provato, poi ridotto a +150). Scoperto
   solo a questa pagina via classe body (vedi includes/header.php: body.page-
   {$activeId}), non tocca gli altri tool. Solo desktop/tablet (min-width:769px):
   sotto i 768px e in landscape basso #effect-mount passa a un'altezza calcolata
   esplicitamente dal viewport con min-height:0 (vedi blocchi mobile sotto),
   pensata per stare intera nello schermo senza scroll — un min-height fisso più
   alto lì romperebbe quel fit. */
@media (min-width: 769px) {
    body.page-overtones-generator #effect-mount {
        min-height: 710px;
    }
}

/* Griglia di selezione effetti in home (icone grandi) */
.effect-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    max-width: 900px;
    margin: 12px auto 0;
}
.effect-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    background-color: #242c2c;
    border: 1px solid #333c3c;
    border-radius: 12px;
    padding: 32px 16px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.effect-tile:hover {
    border-color: #00ffff;
    transform: translateY(-2px);
}
.effect-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(0, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ffff;
    flex-shrink: 0;
}
.effect-icon svg {
    width: 26px;
    height: 26px;
}
.effect-tile h2 {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.effect-tile p {
    font-size: 12px;
    color: #9fb0b0;
    line-height: 1.4;
}


/* Header leftbar - badge "FX" bianco con bordi arrotondati */
.leftbar-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    margin-bottom: 14px;
}
.leftbar-header-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #1a2323;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 14px;
    border-radius: 8px;
}

.leftbar-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* X di chiusura del menu: serve solo nell'overlay mobile a schermo
   intero, invisibile nella sidebar normale desktop. */
.leftbar-panel-close {
    display: none;
    align-self: flex-end;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 6px;
    margin-bottom: 8px;
}
.leftbar-panel-close svg {
    width: 24px;
    height: 24px;
}

/* Hero mobile in home: immagine (per ora un placeholder a gradiente,
   da sostituire con una foto vera) che sfuma nello sfondo della pagina
   prima che inizi il testo descrittivo. Nascosta su desktop. */
.mobile-hero {
    display: none;
}
.mobile-hero-media {
    position: relative;
    height: 210px;
    margin: -20px -20px 16px;
    background-color: #123f3f;
    background-image: url("../pict/Bkg Mobile.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.mobile-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(44, 55, 55, 0) 40%, #2c3737 100%);
}

/* Hamburger nella topbar: invisibile su desktop, unico trigger del menu
   effetti su mobile (vedi media query sotto). Apre/chiude #leftbar-panel
   tramite js/site-nav.js (che lavora per id, indipendentemente da dove
   si trova il bottone nel DOM). */
.topbar-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
}
.topbar-menu-icon {
    width: 24px;
    height: 24px;
}

/* Nav degli effetti */
.fx-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Pulsanti delle app - icona + testo + badge */
.fx-label {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #ccd6d6;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.fx-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: inherit;
}

.fx-label-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fx-label:hover {
    color: #fff;
    background-color: rgba(0, 255, 255, 0.08);
}

/* Evidenziazione dell'effetto selezionato: pillola ciano tenue */
.fx-label.active {
    color: #ffffff;
    font-weight: 700;
    background-color: rgba(0, 255, 255, 0.14);
}
.fx-label.active .fx-icon {
    color: #00ffff;
}

/* Separatore e voce muta per contenuti futuri */
.fx-divider {
    height: 1px;
    background-color: #3a4444;
    margin: 10px 4px;
}
.fx-label-muted {
    color: #6f7a7a;
    font-size: 12px;
    cursor: default;
}
.fx-label-muted:hover {
    color: #6f7a7a;
    background-color: transparent;
}

/* Sezione contatti in fondo alla sidebar */
.sidebar-contact {
    margin-top: auto;
    padding-top: 4px;
}
.sidebar-contact-heading {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6f7a7a;
    padding: 0 10px 6px;
}
.sidebar-contact .fx-label-text {
    font-size: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
}




/* Le ads non condividono più l'aspetto "card" di .leftbar/.content
   (sfondo #2c3737 + bordi arrotondati, ereditati da .panel): qui
   diventano trasparenti, si fondono con lo sfondo pagina, e un sottile
   bordo sinistro le separa dal tool — distacco visivo senza una vera
   "scatola" attorno agli annunci. */
.rightbar {
  width: 320px;
  min-width: 320px;
  display: flex;
  flex-direction: column;

  /* Allineamento */
  justify-content: center; /* Centra verticalmente */
  align-items: center;     /* Centra orizzontalmente */

  gap: 15px;
  padding: 15px;
  padding-left: calc(15px + 1%); /* respiro extra dopo il bordo separatore */

  background: transparent;
  border-radius: 0;
  border-left: 1px solid #333c3c; /* stesso grigio usato altrove come separatore sottile */

  /* RISOLUZIONE DEL CONFLITTO */
  height: 100%;            /* Forza l'altezza intera */
  overflow-y: hidden;      /* IMPORTANTE: Sovrascrive .panel per permettere il centraggio */
}

/* Ads unit: volutamente squadrato e neutro, diverso dagli angoli
   arrotondati di .panel (20px) e delle card interne (12px), cosi'
   lo slot pubblicitario resta subito riconoscibile come tale e
   distinto dalla UI dello strumento. */
.ad-unit {
  width: 300px;          /* Larghezza minima richiesta da Google */
  min-width: 300px;
  height: 250px;         /* Altezza standard rettangolo medio */
  flex-shrink: 0;        /* la larghezza era protetta da min-width, l'altezza no:
    se i 3 box non entrano nell'altezza disponibile di .rightbar, senza
    questo si schiacciavano verticalmente (300x250 -> es. 300x180),
    deformando il rettangolo standard. Ora restano sempre 300x250 anche
    se lo spazio scarseggia (in quel caso il terzo box puo' finire
    tagliato da overflow-y:hidden su .rightbar, ma il rapporto resta
    corretto invece di stirarsi). */
  border-radius: 0;
  overflow: hidden;
  border: 1px solid #222;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-placeholder-label {
  color: #444;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  font-family: 'Lato', Arial, sans-serif;
}

.ad-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

/* Scrollbar personalizzata */
.panel::-webkit-scrollbar {
  width: 6px;
}
.panel::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 10px;
}


/* =========================================================
   GUSCIO MOBILE
   Sotto i 768px la pagina passa da layout "app" a schermo
   fisso (100vh, 3 colonne) a layout verticale scrollabile:
   1) topbar
   2) menu effetti collassato a dropdown (tap per aprire)
   3) contenuto/tool
   4) box ads impilati sotto
   Nota: la responsività interna dei singoli tool (canvas,
   knob, ecc.) è fuori scope di questo guscio e va rivista
   effetto per effetto.
   ========================================================= */
/* Il secondo selettore intercetta gli smartphone in orizzontale: sono
   spesso più larghi di 768px (es. ~700-930px ruotati) ma con un'altezza
   ridotta (~350-500px), quindi senza questa condizione ricadrebbero nel
   layout desktop (sidebar intesa, altezza fissa) che su quello spazio
   verticale ridotto schiaccia il tool. 500px di altezza copre gli
   smartphone attuali in landscape senza intercettare i tablet (che in
   landscape restano tipicamente oltre 768px di altezza). */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {

  body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
  }

  .main {
    flex-direction: column;
    height: auto;
    overflow: visible;
    /* Margini orizzontali ridotti da 12 a 8px: recupera larghezza per il
       tool dentro la card (vedi anche .content sotto, stesso obiettivo). */
    padding: 0 8px 16px;
    /* Era 12px: e' lo spazio vuoto tra la topbar e il riquadro del tool
       (.leftbar sopra e' invisibile/collassata su mobile, quindi questo
       gap si vede tutto come vuoto tra topbar e card). */
    gap: 4px;
  }

  /* .content eredita .panel (padding:20px): su mobile lo stringiamo a
     8px per recuperare larghezza utile al tool, mantenendo pero' la
     card (sfondo + bordi arrotondati) invariata nell'aspetto. */
  .content {
    padding: 8px;
  }

  /* Topbar compatta: logo sempre visibile (versione mobile via <picture>
     in header.php, piu' corta in altezza di quella desktop) + hamburger.
     Logo a 32px (26px illeggibile, 36px troppo grande) — topbar a 44px
     per lasciargli ~6px di margine sopra/sotto, 16px in meno dei 60px
     originali col logo desktop-size. */
  .topbar {
    height: 44px;
    justify-content: space-between;
  }
  .topbar-logo {
    height: 32px;
  }
  .topbar-menu-toggle {
    display: flex;
  }

  /* La sidebar non è più una barra visibile su mobile: resta solo come
     contenitore del menu a schermo intero, aperto dall'hamburger nella
     topbar. */
  .leftbar {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }
  .leftbar-header {
    display: none;
  }

  /* Menu a schermo intero, in scorrimento da destra (stile Spotify):
     sempre presente nel DOM ma spinto fuori dallo schermo con
     translateX, così l'animazione resta fluida in entrambe le
     direzioni. position:fixed lo ancora al viewport, non alla sidebar,
     quindi copre tutto (topbar inclusa) qualunque sia lo scroll. */
  .leftbar-panel {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: #1c2424;
    border-radius: 0;
    padding: 20px;
    max-height: none;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .leftbar.nav-open .leftbar-panel {
    transform: translateX(0);
  }
  .leftbar-panel-close {
    display: flex;
  }

  /* Contenuto a piena larghezza */
  .content {
    width: 100%;
  }
  /* Altezza calcolata esplicitamente dal viewport reale (non più un
     min-height fisso a caso, tipo 380px, che su un telefono da 667px di
     altezza è una proporzione diversa che su uno da 932px — da qui la
     sensazione di "mai proporzionale" tra un device e l'altro). 104px è
     la chrome sopra il tool: topbar (44, era 60 col logo desktop-size)
     + padding alto del pannello (20) + blocco titolo (~40). height (non
     min-height) + flex-shrink:0: il valore calcolato è sempre esatto,
     non negoziato con la guida sotto (che infatti rimane raggiungibile
     solo scrollando la pagina, come già avveniva). ATTENZIONE: dvh (dynamic
     viewport height) si ricalcola in tempo reale mentre la barra indirizzi
     del browser appare/scompare durante lo scroll — su device reale questo
     si vedeva come un tool che cambiava leggermente dimensione mentre si
     scrollava. svh (small viewport height) usa invece il valore minimo
     garantito calcolato una volta, resta fisso durante lo scroll. Niente
     piu' overshoot oltre il 100%: il tool deve stare intero nello schermo
     all'apertura della pagina, non serve piu' scrollare per vederlo tutto.
     vh come fallback per browser che non supportano svh. */
  #effect-mount {
    height: calc(100vh - 104px);
    height: calc(100svh - 104px);
    min-height: 0; /* la regola base (desktop) impone min-height:560px: senza
      azzerarlo qui, il CSS box model userebbe max(height calcolata, 560px),
      cioè sempre 560px — vanificando il calcolo esplicito sopra. Questo era
      il bug reale dietro il tool che continuava a sforare. */
    flex-shrink: 0;
    overflow: hidden;
  }

  /* Hero mobile in home, visibile solo sotto i 768px */
  .mobile-hero {
    display: block;
  }

  /* Ads: i 3 box statici spariscono su mobile, la monetizzazione mobile
     è affidata all'anchor ad di Google (banner fisso in basso, da
     attivare via Auto ads quando l'account AdSense sarà pronto). */
  .rightbar {
    display: none;
  }

  /* Griglia effetti in home: una colonna più leggibile su mobile */
  .effect-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  /* Teaser sotto il tool: subito dopo #effect-mount c'erano 2-3 paragrafi
     introduttivi per intero prima della Parameter Guide (h2/h3) — su
     mobile diventava un muro di testo lungo prima di capire che sotto
     c'è altro. .seo-teaser (wrapper dei soli paragrafi introduttivi,
     aggiunto nell'HTML di ogni pagina effetto) mostra solo il primo
     paragrafo, troncato a 2 righe con ellissi; eventuali paragrafi
     intro successivi (es. il terzo di limiter.php, sul Lookahead)
     vengono nascosti. La Parameter Guide sotto (fuori da .seo-teaser)
     resta intatta e raggiungibile scorrendo, come da richiesta. */
  .seo-teaser p {
    display: none;
  }
  .seo-teaser p:first-child {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 0;
  }

  .cookie-banner {
    padding: 12px 16px;
    text-align: center;
  }
}

/* Overtones Generator: qualche px in più anche su mobile, stesso principio
   dell'override desktop sopra (+150px lì). Qui il budget è ovviamente molto
   più risicato (104px di "chrome" sottratti all'intero viewport), ma c'è un
   po' di margine: si può sacrificare un po' di testo SEO sotto al tool (già
   raggiungibile scrollando la pagina, la guida parametri non sparisce) per
   dare più respiro a SPECTRUM VIEW/OSCILLATORS + lista oscillatori nel
   pannello destro. -50px di chrome sottratta (era -30px, alzato ulteriormente
   su segnalazione: i pulsanti SEPARATE/MERGED in fondo uscivano ancora dal
   bordo del tool su iPhone anche con la prima riduzione) = +50px di tool,
   combinato con l'altezza ridotta della griglia oscillatori sopra (osc-header
   64px->52px in style_OvertonesGenerator.css) per chiudere il gap residuo.
   IMPORTANTE: blocco separato con (orientation:portrait) esplicito, NON
   dentro al blocco combinato sopra (che include anche l'OR con landscape
   corto) — altrimenti, essendo "body.page-overtones-generator #effect-mount"
   più specifico del semplice "#effect-mount" usato nel blocco landscape
   dedicato più sotto, questa regola avrebbe vinto anche lì scavalcando quel
   calcolo (tarato apposta su un budget diverso), landscape va lasciato
   stare. */
@media (max-width: 768px) and (orientation: portrait) {
  body.page-overtones-generator #effect-mount {
    height: calc(100vh - 54px);
    height: calc(100svh - 54px);
  }
}

/* ============================================================
   FIX TABLET: sotto i 768px scatta il guscio mobile sopra. Nella fascia
   tablet il layout desktop a 3 colonne resta attivo cosi' com'e' —
   leftbar (min 150px) + content (flex:1) + rightbar ads (fissa 320px,
   vedi .rightbar sopra) — e i 320px fissi delle ads stringono troppo
   .content.
   Prima versione di questa regola usava (min-width:769px) and
   (max-width:1024px), pensato per un iPad in portrait: sbagliato, un
   iPad in landscape e' gia' largo 1180px (10th gen) o piu' (1194px
   iPad Pro 11", 1366px iPad Pro 12.9"), fascia che si sovrappone in
   pieno alla larghezza di moltissimi laptop (1366x768 e' una delle
   risoluzioni piu' comuni in assoluto) — un semplice max-width li
   avrebbe confusi con un tablet e nascosto le ads anche li'.
   Si usa quindi (hover:none) and (pointer:coarse), che intercetta i
   device a controllo touch/senza puntatore preciso (tablet, telefoni)
   a QUALSIASI larghezza, senza toccare i laptop/desktop con mouse o
   trackpad anche se hanno una finestra della stessa identica
   larghezza in pixel. (min-width:769px) resta solo per non
   sovrapporsi al guscio mobile, che sotto i 768px gestisce le ads
   (e tutto il resto) per conto suo.
   Fix minimo per ora, come da richiesta: si nasconde solo la colonna
   ads, .content recupera lo spazio liberato; il resto del layout (menu
   a sidebar fissa, non a dropdown) resta quello desktop. La
   responsivita' interna dei singoli tool (canvas, knob) su questa
   fascia di larghezza resta comunque da rivedere effetto per effetto,
   stesso discorso gia' aperto per il guscio mobile qui sopra — qui si
   tratta solo lo spazio liberato dalle ads, non i tool stessi.
   Gestione ads su tablet (magari un formato diverso da 300x250 in
   colonna) da decidere in seguito. */
@media (min-width: 769px) and (hover: none) and (pointer: coarse) {
  .rightbar {
    display: none;
  }
}

/* ============================================================
   TELEFONO IN LANDSCAPE — sovrascrive il blocco mobile qui sopra.
   Stesso principio del blocco portrait: #effect-mount ottiene
   un'altezza calcolata esplicitamente dal viewport reale (dvh), non
   più negoziata via flex/min-height contro .seo-intro-below. .main
   resta quindi nel flusso libero ereditato dal blocco sopra (niente
   più altezza vincolata + overflow:hidden su .main): la pagina scorre
   naturalmente sotto al tool per raggiungere la guida, esattamente
   come in portrait — un solo modello di comportamento per entrambi
   gli orientamenti, così la "sensazione" è la stessa su ogni device. */
@media (orientation: landscape) and (max-height: 500px) {
  /* Ulteriormente ridotta (era 40px): l'altezza qui e' il vincolo piu'
     stretto di tutti, ogni pixel tolto alla chrome va diretto al tool.
     Logo/hamburger ridimensionati di conseguenza sotto. */
  .topbar {
    height: 34px;
  }
  .topbar-logo {
    height: 24px;
  }
  /* Il padding di base (8px, uguale su tutti i lati) con l'icona da 24px
     non ci starebbe piu' in 34px di topbar: qui lo stringiamo solo in
     verticale, l'icona resta leggibile e centrata. */
  .topbar-menu-toggle {
    padding: 4px 8px;
  }

  /* Era 8px 14px: il verticale e' il piu' prezioso qui (altezza scarsa),
     l'orizzontale resta invariato. */
  .panel {
    padding: 4px 14px;
  }

  /* gap azzerato (era 4px, ereditato dal blocco condiviso sopra): con
     .leftbar ridotta a ~0px di altezza su mobile/landscape, era spazio
     vuoto puro tra topbar e card del tool.
     padding-bottom azzerato (era 16px, ereditato dallo stesso blocco):
     li' ha senso, e' pensato per il portrait dove la pagina scorre
     verso la guida sotto al tool. Qui invece vogliamo un fit garantito
     senza scroll — quei 16px si sommavano SEMPRE all'altezza della
     pagina, indipendentemente da quanto si stringeva il resto sopra,
     ed erano la causa reale dello scroll residuo che restava anche
     dopo aver ristretto topbar/padding/titolo. */
  .main {
    gap: 0;
    padding-bottom: 0;
  }

  .fx-title {
    font-size: 12px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Chrome sopra/sotto il tool: la stima teorica (58px + margine) non
     bastava — misurato DAVVERO in Console con
     getBoundingClientRect().bottom - window.innerHeight sul tool
     renderizzato: sforava di ~30px anche col vecchio valore di 68px,
     quindi il vero totale e' ~98px (68+30). Arrotondato a 100 con un
     filo di margine. Se in futuro serve ritoccare, rimisura cosi'
     invece di ricalcolare a tavolino: la stima teorica qui si e'
     dimostrata inaffidabile (probabilmente per via del line-height
     reale del font Lato, piu' alto di quanto assunto). Stesso
     ragionamento del blocco portrait sopra: svh (non dvh) per
     un'altezza fissa che non cambia mentre si scrolla, niente overshoot
     oltre il 100%. */
  #effect-mount {
    height: calc(100vh - 100px);
    height: calc(100svh - 100px);
    min-height: 0; /* stesso motivo del blocco portrait sopra: azzera il
      min-height:560px ereditato dalla regola base (desktop), altrimenti
      vince quello e il calcolo esplicito qui non ha alcun effetto. */
    flex-shrink: 0;
    overflow: hidden;
  }
}

/* =========================================================
   PAGINE LEGALI (Privacy Policy, Cookie Policy)
   Riusa .fx-title per l'H1, questo blocco stila il testo
   lungo sotto: sottotitoli, paragrafi, liste, link.
   ========================================================= */
.legal-content {
    max-width: 900px;
    line-height: 1.6;
    padding-bottom: 8px;
}
.legal-updated {
    font-size: 12px;
    color: #6f7a7a;
    margin-bottom: 20px;
}
.legal-content h2 {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 22px 0 8px;
}
.legal-content h2:first-child {
    margin-top: 0;
}
.legal-content p {
    font-size: 14px;
    color: #ccd6d6;
    margin-bottom: 10px;
}
.legal-content ul {
    margin: 0 0 12px 20px;
}
.legal-content li {
    font-size: 14px;
    color: #ccd6d6;
    margin-bottom: 6px;
}
.legal-content a {
    color: #00ffff;
}

/* Sezione link legali in fondo al menu effetti, sotto Contact */
.sidebar-legal {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-legal a {
    font-size: 11px;
    color: #6f7a7a;
    text-decoration: none;
    padding: 4px 10px;
}
.sidebar-legal a:hover {
    color: #ccd6d6;
}

/* Banner di consenso cookie: barra fissa in basso, presente su tutte
   le pagine finché l'utente non clicca Accetta (js/cookie-consent.js). */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background-color: #1c2424;
    border-top: 1px solid #333c3c;
    padding: 14px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 13px;
    color: #ccd6d6;
}
.cookie-banner a {
    color: #00ffff;
}
.cookie-banner-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.cookie-banner-btn {
    background-color: #00ffff;
    color: #132323;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.cookie-banner-btn:hover {
    opacity: 0.85;
}
.cookie-banner-btn-secondary {
    background-color: transparent;
    color: #ccd6d6;
    border: 1px solid #4a5555;
}
.cookie-banner-btn-secondary:hover {
    opacity: 1;
    border-color: #6f7a7a;
    color: #fff;
}