/* Q&A Manuale — addon, scoped to .qna */
.qna .hero{ padding-top: 32px; padding-bottom: 0 }
.qna .hero .title-engraved{ font-size: 42px; }
.qna .hero .lead{ max-width: 880px; margin: 10px auto 0; }

.qna .ask-panel{ max-width: 980px; margin: 18px auto; padding: 18px; }
.qna .ask-form{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.qna .ask-input{ flex: 1 1 520px; background:#1b1512; border:1px solid rgba(201,168,106,.45);
  color:var(--ink); padding:12px 14px; border-radius: 10px; outline:none; font-family:"IM Fell English",serif; }
.qna .ask-input::placeholder{ color: var(--muted); }
.qna .ask-btn{
  --glowA: rgba(255,220,140,.9);
  --glowB: rgba(201,168,106,.8);
  position: relative;
  font-family:"Cinzel",serif; font-weight:700; letter-spacing:.04em;
  color:#111; text-shadow:0 1px 0 rgba(255,255,255,.6);
  border:1px solid rgba(201,168,106,.65);
  background: linear-gradient(180deg, #f6e4b6, #d9b66f 55%, #a07a3c);
  border-radius:12px; padding:12px 18px; cursor:pointer;
  box-shadow:
    0 0 20px rgba(201,168,106,.25),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.25);
  transition: transform .08s ease;
  isolation:isolate;
}
.qna .ask-btn:hover{ transform: translateY(-1px); }
.qna .ask-btn:active{ transform: translateY(0); }
.qna .ask-btn:focus-visible{ outline: 2px solid var(--glowA); outline-offset: 2px; }
.qna .ask-btn::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background: radial-gradient(120% 60% at 50% -20%, var(--glowA), transparent 60%);
  filter: blur(6px); opacity:.9; animation: qnaPulse 2.4s infinite ease-in-out;
}
@keyframes qnaPulse{
  0%, 100% { opacity:.65; }
  50% { opacity: 1; }
}

.qna .answer{ white-space: pre-wrap; line-height: 1.72; margin-top: 14px; }
.qna .cite{ color: var(--muted); font-size: .95rem; margin-top: 6px; }
.qna .hint{ color: var(--muted); font-size: .95rem }

/* Keep fog & fireflies visible above background */
.bg-fog{ z-index: 1; }
.wrap > *{ position: relative; z-index: 2; }

/* FX canvas layering */
#fxCanvas{ z-index: 45; mix-blend-mode: screen; opacity: .75; }

@media (max-width: 740px){
  .qna .hero .title-engraved{ font-size: 32px; }
}


/* === Layout tweaks requested === */
/* Header fixed at top */
.qna-header-fixed{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(2px);
  background: linear-gradient(180deg, rgba(10,8,7,.85), rgba(10,8,7,.35));
  border-bottom: 1px solid rgba(201,168,106,.18);
}

/* Stage centers content vertically, keeping footer visible */
.qna-stage{
  min-height: calc(100vh - 140px);
  display: grid;
  place-items: center;
  align-content: center;
  padding: 16px;
}

/* Ask panel size fixed and centered */
.ask-panel{
  width: min(920px, 92vw);
}

/* Improve button readability on dark bg */
.ask-btn{
  color:#1a1206 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

/* Ensure inputs are readable */
.ask-input{
  font-size: 1rem;
}

/* On small screens, keep center spacing */
@media (max-width: 700px){
  .qna-stage{ min-height: calc(100vh - 120px); }
}

/* === Responsività migliorata (Q&A) === */

/* Titolo che scala bene su tutti i device */
.qna .hero .title-engraved{
  font-size: clamp(28px, 6.5vw, 42px);
}

/* Contenitore centrale: usa viewport dinamica su mobile */
.qna-stage{
  min-height: calc(100dvh - 140px);
}
@supports not (height: 100dvh){
  .qna-stage{ min-height: calc(100vh - 140px); }
}

/* Form fluido: input non “spinge” il layout e va a tutta larghezza su schermi stretti */
.qna .ask-form{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.qna .ask-input{
  flex: 1 1 400px;   /* base flessibile */
  min-width: 0;     /* permette di restringersi senza overflow */
  width: 100%;      /* sui device stretti riempie la riga */
}
@media (max-width: 700px){
  .qna .ask-input{ flex-basis: 100%; }
  .qna .ask-btn{ width: 100%; }
}

/* Assicura che media e immagini non escano orizzontalmente */
.qna img, .qna video{ max-width: 100%; height: auto; }

/* ====== Centramento e responsività ====== */
.qna .hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap: clamp(8px, 1.6vw, 14px);
  padding-top: clamp(40px, 10vh, 120px);
}
.qna .qna-stage{ min-height: calc(100dvh - 140px); }
@supports not (height: 100dvh){ .qna .qna-stage{ min-height: calc(100vh - 140px); } }

/* TITOLO che scala bene */
.qna .hero .title-engraved{ font-size: clamp(28px, 6.5vw, 42px); margin: 0; }

/* Nasconde eventuale vecchio header con fascia scura */
.qna-header-fixed{ display:none !important; }


/* ===== Logo oro scuro + shimmer discreto ===== */
.brand-hero .brand-main{
  linear-gradient(90deg,
    #b18a3c 0%, #e8d8b3 20%, #c9a86a 40%, #7c5f31 60%, #e8d8b3 80%, #b18a3c 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: goldShine 6s linear infinite;
}
@keyframes goldShine{
0%{ background-position: 0% 0%; text-shadow: 0 0 10px rgba(201,168,106,.28), 0 2px 0 #000; }
50%{ background-position: 100% 0%; text-shadow: 0 0 16px rgba(201,168,106,.45), 0 2px 0 #000; }
100%{ background-position: 200% 0%; text-shadow: 0 0 10px rgba(201,168,106,.28), 0 2px 0 #000; }
}
/* Glint sweep overlay for a specular highlight */
.brand-main::after{
content:""; position:absolute; inset:0; pointer-events:none;
background: linear-gradient(75deg, transparent 0%, rgba(255,255,255,.0) 30%,
          rgba(255,245,210,.45) 45%, rgba(255,255,255,.0) 60%, transparent 100%);
mix-blend-mode: screen;
transform: translateX(-120%) skewX(-18deg);
animation: glintSweep 4.5s cubic-bezier(.4,.2,.2,1) infinite;
}
@keyframes glintSweep{
0%{ transform: translateX(-120%) skewX(-18deg); opacity:.0; }
20%{ opacity:.55; }
50%{ transform: translateX(120%) skewX(-18deg); opacity:.0; }
100%{ transform: translateX(120%) skewX(-18deg); opacity:.0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
.brand-main, .brand-main::after{ animation: none; background-size: 100% 100%; }
}


/* ====== Form fluido ====== */
.qna .ask-form{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.qna .ask-input{ flex:1 1 420px; min-width:0; width:100%; }
@media (max-width: 720px){
  .qna .ask-input{ flex-basis:100%; }
  .qna .ask-btn{ width:100%; }
}



/* ====== Accessibilità: riduci animazioni ====== */
@media (prefers-reduced-motion: reduce){
  .brand-hero .brand-main, .qna .ask-btn{ animation: none !important; }
  .qna .ask-btn::before, .qna .ask-btn::after{ display:none !important; }
}

/* Media protetti */
.qna img, .qna video{ max-width:100%; height:auto; }
/* --- Fix centratura, niente overflow orizzontale --- */

/* 1) Pannello: usa dimensione relativa al contenitore, non al viewport */
.qna .ask-panel{
  width: 100%;
  max-width: 920px;          /* era: width: min(920px, 92vw) -> causava overflow */
  margin: 18px auto;
  padding: clamp(14px, 2vw, 18px);
}

/* 2) Stage davvero centrato (verticale + orizzontale) e con padding simmetrico */
.qna-stage{
  min-height: calc(100dvh - 140px);
  display: grid;
  place-content: center;      /* centra il contenuto della grid */
  padding-inline: clamp(12px, 3.5vw, 24px);
  gap: clamp(12px, 2vw, 18px);
}
@supports not (height: 100dvh){
  .qna-stage{ min-height: calc(100vh - 140px); }
}

/* 3) Hero: limito la larghezza e la centro al pixel */
.qna .hero{
  max-width: 920px;
  margin: 0 auto;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap: clamp(8px, 1.6vw, 14px);
  padding-top: clamp(40px, 10vh, 120px);
}

/* 4) Logo: blocco gli effetti luminosi dentro al box del brand (no scroll orizzontale) */
.brand-hero{ overflow: hidden; }