/*
Theme Name: WallPixelArt
Theme URI: https://wallpixelart.com
Author: WallPixelArt
Description: Tema scuro companion per il plugin WallPixelArt v3. Header con logo, sottotitolo animato, card statistiche live, popup caffe. La barra inferiore e fornita dal plugin. Mobile-first.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wallpixelart
*/

:root{
  --wpa-bg:#0a0a12;
  --wpa-panel:#101019;
  --wpa-panel-2:#0c0c14;
  --wpa-line:rgba(255,255,255,.08);
  --wpa-text:#f5f5fa;
  --wpa-muted:#8a8a9a;
  --wpa-gold:#f4b400; --wpa-red:#ff4d4d; --wpa-purple:#8b5cf6;
  --wpa-green:#22c55e; --wpa-pink:#ff5fa2; --wpa-accent:#ff4d6d; --wpa-verified:#3b9bff;
  --wpa-display:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wpa-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;min-width:0;}
html{overflow-x:hidden;}
/* Scrollbar nascoste OVUNQUE, anche dentro la WebView di App Inventor. Il plugin
   ha già questa regola, ma la ripetiamo qui perché style.css del tema è l'unico
   CSS caricato su TUTTE le pagine (anche quelle senza il bundle del plugin), e in
   app la home mostrava ancora la barra. scrollbar-color transparent copre le
   WebView Chromium recenti che disegnano la barra del frame radicale. Lo scroll
   resta attivo: togliamo solo il disegno della barra. */
html,body,*{scrollbar-width:none;-ms-overflow-style:none;scrollbar-color:transparent transparent;}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{width:0 !important;height:0 !important;display:none;}
html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb,*::-webkit-scrollbar-thumb{background:transparent !important;}
/* Sticky footer: il contenuto (main) si allunga a riempire lo schermo, così il
   footer sta SEMPRE in fondo — anche con poco contenuto non risale a metà pagina
   lasciando la barra flottante staccata. Il padding-bottom riserva lo spazio
   della barra fissa, sotto il footer, così la barra non lo copre mai. */
body{margin:0;background:var(--wpa-bg);color:var(--wpa-text);
  font-family:var(--wpa-ui);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
  padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));} /* spazio per la barra fissa */
.wpa-site-main{flex:1 0 auto;}
.wpa-site-footer{flex-shrink:0;}
a{color:var(--wpa-accent);text-decoration:none;}
img{max-width:100%;height:auto;}

/* ===== HEADER (barra in alto) ===== */
/* Mobile: brand + azioni in riga, statistiche a capo sotto a tutta larghezza.
   Desktop (>=980px): griglia a 3 zone con le statistiche centrate fra brand
   (sinistra) e azioni (destra). */
/* +15% (01/08/2026): l'intestazione ha perso cerca, caffè, classifica e omino —
   restano logo, saluto e campanella — e quello che resta merita più aria. */
.wpa-site-header{display:flex;flex-wrap:nowrap;align-items:center;gap:11px;
  margin:9px clamp(10px,3vw,16px) 14px;padding:9px 7px;
  background:transparent;border:0;
  /* Altezza logo = preferenza del Customizer (header la passa come -pref). */
  --wpa-logo-h:var(--wpa-logo-h-pref,73px);}
/* Su mobile un tetto: al 130% di default il logo era così alto da far andare a
   capo lang/cerca/pubblica. min() rispetta chi l'ha scelta più piccola del tetto. */
@media (max-width:600px){
  /* Tetto più basso (34px) e margini ridotti: su schermi con la fotocamera "a
     goccia" — e dentro una webview, dove non c'è la barra del browser a fare da
     stacco — l'header finiva sotto l'intaglio e si leggeva male. */
  /* +15% su TUTTO, contenuto compreso (01/08/2026): l'intestazione era stretta
     addosso al logo, e da quando ci sono rimasti solo saluto e campanella lo
     spazio c'è. Cresce il tetto del logo (34→39), i margini e i pulsanti: se
     crescesse solo il contenitore, dentro resterebbe tutto piccolo e sembrerebbe
     più vuoto, non più largo. */
  .wpa-site-header{--wpa-logo-h:min(var(--wpa-logo-h-pref,73px),54px);
    margin-top:2px;padding-top:7px;padding-bottom:7px;
    /* Rispetta l'area sicura del dispositivo, se dichiarata. Ma la WebViewer di
       App Inventor NON popola env(safe-area-inset-*) (torna 0): sui telefoni con
       fotocamera frontale CENTRATA (punch-hole) l'header finiva sotto l'intaglio.
       Quindi teniamo un pavimento fisso (28px ~ altezza status bar/camera) che
       cede solo a un'area sicura dichiarata più grande. */
    padding-top:max(28px,env(safe-area-inset-top,0px));}
  .wpa-brand-word{font-size:calc(clamp(18px,5.3vw,23px) * var(--wpa-text-scale,1));}
  .wpa-hdr-btn{width:39px;height:39px;}
  .wpa-hdr-btn svg{width:20px;height:20px;}
}
/* Su mobile l'header non ha i contatori (nascosti) ed è basso: lo stacco prima
   del typewriter sembra troppo. Lo azzeriamo (e riduciamo anche il margine sopra). */
@media (max-width:979px){ .wpa-site-header{margin-top:4px;margin-bottom:0;padding-bottom:0;} }
.wpa-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;min-width:0;order:1;}
/* Saluto a 2 righe fra logo e pulsanti: prende lo spazio libero e si rimpicciolisce
   (font clamp + ellissi) senza spostare i pulsanti a destra. */
.wpa-hdr-greet{order:2;flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:0 6px;overflow:hidden;}
/* Testo che RIEMPIE: resta su 1 riga se corto, va a 2 righe se lungo (nick),
   mai oltre — così l'altezza dell'header non cambia mai. */
.wpa-hdr-greet-tx{font-size:clamp(10px,3.1vw,13.5px);font-weight:700;color:#fff;line-height:1.14;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;}
/* Nome del waller connesso: colore del SUO clan (--wpa-myclan, impostata dal
   plugin). Senza clan resta bianco: il ripiego non deve sembrare un clan. */
.wpa-hdr-greet-tx .n{color:var(--wpa-myclan,#fff);font-weight:800;}
/* ── Intro a macchina da scrivere (ospiti): a fianco del logo, allineata a
   sinistra, SEMPRE su una riga. Il font si auto-riduce via JS per stare nello
   spazio libero, così il logo non si muove mai. Due colori per frase (--c1/--c2),
   uguali per tutte. ── */
.wpa-hdr-intro{order:2;flex:1 1 auto;min-width:0;display:flex;align-items:center;
  padding:0 4px;text-align:left;font-weight:800;overflow:hidden;
  --wpa-intro-c1:#ff4d6d; --wpa-intro-c2:#7b5bff;
  font-family:var(--wpa-display,inherit);letter-spacing:-.01em;white-space:nowrap;
  font-size:calc(clamp(13px,3.4vw,20px) * var(--wpa-text-scale,1));line-height:1.25;}
.wpa-hdr-intro-tx{white-space:nowrap;overflow:hidden;}
.wpa-hdr-intro-a{color:var(--wpa-intro-c1);}
.wpa-hdr-intro-b{color:var(--wpa-intro-c2);}
.wpa-hdr-intro-caret{display:inline-block;margin-left:2px;font-weight:400;
  color:var(--wpa-intro-c2);animation:wpaKwBlink 1s steps(1) infinite;}
@media (min-width:980px){ .wpa-hdr-intro{flex:1 1 auto;max-width:none;padding:0 8px;} }
@media (prefers-reduced-motion:reduce){ .wpa-hdr-intro-caret{animation:none;opacity:.85;} }
/* I pulsanti NON vanno MAI a capo: riga flex compatta che non si stringe. Il
   saluto (flex:1, min-width:0) assorbe lo spazio restringendosi/andando a 2 righe. */
.wpa-hdr-actions{order:3;flex:0 0 auto;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;}
.wpa-hdr-actions .wpa-hdr-btn{flex:0 0 auto;}
/* Il banner "novità" nell'header è solo DESKTOP: su mobile sta sopra il muro.
   Specificità alta per battere .wpa-newbanner{display:flex} di wall.css. */
.wpa-site-header .wpa-hdr-banner{display:none;}
@media (min-width:980px){
  /* Desktop: logo · saluto · banner novità · pulsanti, su UNA riga allineata al muro.
     Tutti verticalmente centrati; il banner è compatto (1 riga) per non sfalsare. */
  .wpa-site-header{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;
    width:min(94vw,1280px);margin-inline:calc(50% - min(47vw,640px));
    box-sizing:border-box;padding-left:0;padding-right:0;}
  .wpa-brand{order:1;flex:0 0 auto;}
  .wpa-hdr-greet{order:2;flex:0 1 auto;max-width:200px;}
  .wpa-site-header .wpa-hdr-banner{order:3;display:flex;align-items:center;flex:1 1 auto;min-width:0;margin:0;padding:6px 14px;}
  .wpa-hdr-banner .wpa-newbanner-tx{flex-direction:row;align-items:baseline;gap:7px;min-width:0;overflow:hidden;}
  .wpa-hdr-banner .wpa-newbanner-tx b{white-space:nowrap;}
  .wpa-hdr-banner .wpa-newbanner-tx span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .wpa-hdr-actions{order:4;flex:0 0 auto;}
}
/* Quadrati del logo ridimensionati per essere proporzionati al testo (#24):
   ~0.78× dell'altezza logo, così non sovrastano la scritta "Wallpixelart". */
.wpa-brand-grid{height:calc(var(--wpa-logo-h,48px) * .78);width:calc(var(--wpa-logo-h,48px) * .78);flex:0 0 auto;display:block;}
.wpa-brand-div{width:1px;height:calc(var(--wpa-logo-h,48px) * .56);background:rgba(255,255,255,.18);flex:0 0 auto;}
.wpa-brand-word{font-family:var(--wpa-display);font-weight:500;letter-spacing:-.02em;line-height:1;white-space:nowrap;
  font-size:calc(clamp(19px,5vw,25px) * var(--wpa-text-scale,1));
  background:linear-gradient(180deg,#fff 0%,#d2d2d9 52%,#9b9ba3 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.wpa-brand-word b{font-weight:800;}
.wpa-brand img{height:var(--wpa-logo-h,48px);width:auto;}
.wpa-site-title{font-family:var(--wpa-display);font-weight:800;
  font-size:calc(clamp(15px,4.2vw,19px) * var(--wpa-text-scale,1));letter-spacing:-.5px;color:var(--wpa-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wpa-hdr-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
/* Pulsanti header rimpiccioliti del ~15% (38→32px). */
.wpa-hdr-btn{width:32px;height:32px;flex:0 0 32px;border-radius:50%;border:1px solid var(--wpa-line);
  background:#15151f;display:grid;place-items:center;color:var(--wpa-text);position:relative;
  font-size:15px;text-decoration:none;cursor:pointer;}
.wpa-hdr-btn:hover{background:#1c1c28;}
.wpa-hdr-btn svg{width:16px;height:16px;}
.wpa-hdr-coffee{color:var(--wpa-accent);}
.wpa-hdr-bell .wpa-bell-badge{position:absolute;top:-4px;right:-4px;background:var(--wpa-accent);
  color:#14141c;font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;
  display:grid;place-items:center;padding:0 4px;}
.wpa-hdr-bell .wpa-bell-badge:empty{display:none;}
/* "Squillo": la campanella oscilla come se suonasse. Il perno è in alto (come
   una campana appesa). Parte solo al primo accesso con roba da votare. */
.wpa-hdr-bell.wpa-bell-ring svg{animation:wpaBellRing 1.2s ease;transform-origin:top center;}
@keyframes wpaBellRing{
  0%,100%{transform:rotate(0)}
  8%,24%,40%{transform:rotate(15deg)}
  16%,32%,48%{transform:rotate(-15deg)}
  60%{transform:rotate(7deg)} 72%{transform:rotate(-7deg)} 84%{transform:rotate(3deg)}
}
@media(prefers-reduced-motion:reduce){.wpa-hdr-bell.wpa-bell-ring svg{animation:none;}}
/* Vibrazione PERIODICA finché ci sono notifiche non lette (>0). */
.wpa-hdr-bell.wpa-bell-unread svg{animation:wpaBellLoop 2.6s ease-in-out infinite;transform-origin:top center;}
@keyframes wpaBellLoop{
  0%,30%,100%{transform:rotate(0)}
  4%{transform:rotate(15deg)} 8%{transform:rotate(-13deg)}
  12%{transform:rotate(10deg)} 16%{transform:rotate(-7deg)} 20%{transform:rotate(4deg)} 24%{transform:rotate(-2deg)}
}
@media(prefers-reduced-motion:reduce){.wpa-hdr-bell.wpa-bell-unread svg{animation:none;}}

/* ===== CONTATORI HEADER (desktop) =====
   Stesso look dei contatori del muro (core.css .wpa-wall-stats): pannello unico,
   colonne divise da una linea, numero colorato verde/oro/arancio in Poppins. */
.wpa-site-header .wpa-statcards{display:flex;align-items:stretch;gap:0;
  background:rgba(20,20,28,.6);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:8px 4px;}
.wpa-site-header .wpa-statcard{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 14px;
  background:none;border:none;box-shadow:none;border-radius:0;}
.wpa-site-header .wpa-statcard + .wpa-statcard{border-left:1px solid rgba(255,255,255,.09);}
.wpa-site-header .wpa-statcard .ic{font-size:14px;flex:0 0 auto;line-height:1;}
.wpa-site-header .wpa-statcard .n{font-family:var(--wpa-display);font-weight:800;font-size:16px;line-height:1;display:block;}
.wpa-site-header .wpa-statcard .l{font-family:var(--wpa-display);font-size:8px;font-weight:600;letter-spacing:.04em;
  color:var(--wpa-muted);margin-top:2px;text-transform:uppercase;line-height:1.15;display:block;white-space:nowrap;}
/* Solo desktop nell'header: su mobile restano i contatori sotto il sottotitolo del muro. */
@media (max-width:979px){ .wpa-site-header .wpa-statcards{display:none;} }

/* Login/Profilo nell'header (a destra della campanella). */
/* Login ospite: stesso cerchio 38px di ricerca/campanella, ma pieno accento
   (è la CTA) con l'icona omino. Niente testo che debordava sotto. */
.wpa-hdr-login{color:#fff;background:var(--wpa-accent);border-color:transparent;}
.wpa-hdr-login:hover{background:var(--wpa-accent);filter:brightness(1.08);}
.wpa-hdr-me{padding:0;overflow:hidden;}
.wpa-hdr-avring{display:block;padding:2px;border-radius:50%;background:linear-gradient(135deg,#ff7a1a,#d64bd6 52%,#8b5cf6);line-height:0;}
.wpa-hdr-av{width:26px;height:26px;border-radius:50%;object-fit:cover;display:block;border:2px solid #0f0f17;box-sizing:border-box;}
.wpa-statcard.is-a .n{color:#35d67f;} /* waller — verde */
.wpa-statcard.is-b .n{color:#ffc21e;} /* promosse — oro */
.wpa-statcard.is-c .n{color:#ff7a4d;} /* in gara — arancio */
/* I contatori dell'header valgono SOLO su desktop (fra logo e azioni): su mobile
   restano quelli sotto il sottotitolo del muro. E mai sul profilo (ha i suoi). */
/* Sul profilo i contatori dell'header non servono (il profilo ha i suoi). */
body.wpa-profile-page .wpa-site-header .wpa-statcards{display:none;}

/* ===== CONTENUTO =====
   Il `min-height:100vh` sul main non c'è più (21/08/2026): teneva il footer una
   schermata intera sotto l'ultimo elemento anche quando la pagina era corta —
   un buco di nero senza motivo. Il footer resta comunque in fondo grazie al
   flex del body (`.wpa-site-main{flex:1 0 auto}`): riempie la finestra quando il
   contenuto è poco, e segue subito l'ultimo elemento quando ce n'è tanto. */
.wpa-container{max-width:560px;margin:0 auto;padding:0 clamp(10px,3vw,16px) 16px;}
.wpa-container h1,.wpa-container h2,.wpa-container h3{font-family:var(--wpa-display);line-height:1.3;}
.wpa-fullwidth .wpa-container{max-width:100%;padding-left:0;padding-right:0;}
.wpa-page-title{font-family:var(--wpa-display);font-size:clamp(24px,6vw,34px);margin:0 0 20px;}
.wpa-entry p{margin:0 0 14px;}
.wpa-entry a{color:var(--wpa-accent);}

/* ===== BARRA INFERIORE ===== */

/* ===== FOOTER ===== */
/* Piè di pagina CENTRATO ovunque compaia: logo, link e copyright in colonna,
   allineati al centro della pagina. */
.wpa-site-footer{border-top:1px solid var(--wpa-line);padding:22px 16px;text-align:center;
  color:var(--wpa-muted);font-size:13px;}
.wpa-site-footer a{color:var(--wpa-muted);}
.wpa-footer-logo{height:26px;width:auto;display:block;margin:0 auto 10px;opacity:.85;}
.wpa-footer-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;margin:0 0 6px;}
.wpa-footer-links a,.wpa-footer-cookie{color:var(--wpa-muted);font-size:13px;text-decoration:none;}
.wpa-footer-links a:hover,.wpa-footer-cookie:hover{color:var(--wpa-text);text-decoration:underline;}
.wpa-footer-cookie{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;font:inherit;line-height:inherit;cursor:pointer;}
.wpa-footer-copy{margin:0;opacity:.8;}

/* contenuti trasparenti per coerenza */
.wpa-site-main,.wpa-container,article,.entry-content,.wp-block-group{background:transparent;}
.wpa-entry h1,.wpa-entry h2,.wpa-entry h3,.wpa-entry h4{color:var(--wpa-text);}

/* Niente rettangolo blu di focus/tap su tutto il sito */
html{ -webkit-tap-highlight-color: transparent; }

/* ── brand: titolo + parole chiave a rotazione ── */
.wpa-brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.1;justify-content:center;}
.wpa-kw{position:relative;display:block;height:1.25em;overflow:hidden;margin-top:2px;}
.wpa-kw-item{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;
  font-size:calc(clamp(10px,2.8vw,12px) * var(--wpa-text-scale,1));
  font-weight:600;letter-spacing:.2px;color:var(--wpa-accent);transition:opacity .5s ease;}
.wpa-kw-item.on{opacity:.92;position:relative;}

/* ── numero caffè offerti (pill accanto all'icona) ── */
.wpa-hdr-coffee{width:auto;flex:0 0 auto;border-radius:99px;padding:0 12px;gap:6px;display:inline-flex;align-items:center;}
.wpa-coffee-n{font-weight:800;font-size:14px;line-height:1;}

/* ── popup "Support the project" (caffè) — autonomo, stessi bordi neon ── */
.wpa-coffee-overlay{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;
  background:rgba(2,2,5,.84);padding:18px;}
.wpa-coffee-overlay.open{display:flex;}
.wpa-popup-coffee{width:min(94vw,400px);background:var(--wpa-pop-bg,radial-gradient(120% 90% at 50% -10%,#1b1620 0%,#121216 55%));color:#fff;border-radius:22px;box-sizing:border-box;
  border:1px solid rgba(255,77,109,.55);
  box-shadow:0 0 0 1px rgba(255,77,109,.25),0 0 26px rgba(255,77,109,.32),0 24px 70px rgba(0,0,0,.6);
  padding:28px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;}
.wpa-coffee-ico{font-size:44px;line-height:1;margin-bottom:6px;}
.wpa-coffee-title{margin:6px 0 8px;font-size:19px;font-weight:800;font-family:var(--wpa-display,inherit);color:#fff;}
.wpa-coffee-text{color:#c8ccd6;font-size:14px;line-height:1.55;margin:0 0 18px;}
.wpa-coffee-text strong{color:#fff;}
.wpa-coffee-go{display:block;width:100%;box-sizing:border-box;background:var(--wpa-accent,#ff4d6d);color:#14141c;
  font-weight:800;text-decoration:none;border-radius:14px;padding:14px 22px;font-size:15px;}
.wpa-coffee-go:hover{filter:brightness(1.06);}
.wpa-popup-coffee .wpa-popup-close{margin-top:14px;background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.25);color:#fff;border-radius:999px;padding:11px 26px;
  font-weight:600;cursor:pointer;font-size:14px;}
.wpa-popup-coffee .wpa-popup-close:hover{background:rgba(255,255,255,.2);}

/* Sottotitolo effetto macchina da scrivere */
.wpa-kw-type{white-space:nowrap;}
.wpa-kw-caret{display:inline-block;margin-left:1px;font-weight:400;opacity:.85;animation:wpaKwBlink 1s steps(1) infinite;}
@keyframes wpaKwBlink{50%{opacity:0;}}

/* ── Switch lingua (header, alto a destra) ── */
.wpa-lang{position:relative;display:inline-flex;}
.wpa-lang-btn{font-size:18px;line-height:1;}
.wpa-lang-flag{font-size:18px;}
.wpa-lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:#1c1c20;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:6px;min-width:170px;box-shadow:0 12px 30px rgba(0,0,0,.45);display:none;z-index:9999;}
.wpa-lang.open .wpa-lang-menu{display:block;}
.wpa-lang-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:#e8e8ea;text-decoration:none;font-size:14px;white-space:nowrap;}
.wpa-lang-item:hover{background:rgba(255,255,255,.08);}
.wpa-lang-item.active{background:rgba(255,77,109,.18);color:#fff;font-weight:600;}
.wpa-lang-emoji{font-size:18px;}

/* Il tema ha il proprio coffee nell'header: nascondo il BMC flottante del plugin */
.wpa-bmc{display:none!important;}

/* Selettore lingua */
.wpa-lang{position:relative;}
.wpa-lang-cur{background:rgba(255,255,255,.06);border:1px solid var(--wpa-line,rgba(255,255,255,.1));
  border-radius:50%;width:38px;height:38px;font-size:18px;cursor:pointer;display:grid;place-items:center;}
.wpa-lang-menu{position:absolute;right:0;top:46px;background:var(--wpa-panel,#101019);
  border:1px solid var(--wpa-line,rgba(255,255,255,.1));border-radius:12px;padding:6px;min-width:160px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);z-index:1001;display:none;flex-direction:column;gap:2px;}
.wpa-lang.open .wpa-lang-menu{display:flex;}
.wpa-lang-menu button{background:none;border:0;color:#fff;text-align:left;padding:9px 12px;border-radius:8px;
  font-size:14px;cursor:pointer;}
.wpa-lang-menu button:hover{background:rgba(255,255,255,.06);}
.wpa-lang-menu button.on{color:var(--wpa-accent,#ff4d6d);font-weight:700;}

/* ── Accessibilità: focus da tastiera visibile + motion ridotto ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--wpa-accent);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  .wpa-kw-caret{animation:none;opacity:.85;}
  .wpa-kw-item{transition:none;}
}

/* Su DESKTOP il footer è centrato (logo, link e copyright in colonna al centro):
   allineato a sinistra sembrava staccato dal muro, che è centrato. Su mobile
   resta a sinistra, dove la colonna è stretta e il centraggio fa "ballare" le
   righe. */
@media (min-width:980px){
  .wpa-site-footer{text-align:center;}
  .wpa-footer-logo{margin-inline:auto;}
  .wpa-footer-links{justify-content:center;}
}