/* ============================================================================
   enhance.css — Frame Asset Management
   ----------------------------------------------------------------------------
   Rifiniture di accessibilita' e di eleganza, caricate DOPO style.css e
   restyle.css. Aggiunte non distruttive: migliorano leggibilita', navigazione
   da tastiera e coerenza visiva senza alterare l'identita' del sito.

   Contenuto:
     1) Skip-link "Salta al contenuto" per screen reader e tastiera
     2) Stati di focus visibili e coerenti (WCAG 2.4.7)
     3) Logo in alto: presenza e leggibilita'
     4) Micro-rifiniture premium (arrotondamenti coerenti, transizioni)
     5) Rispetto di prefers-reduced-motion e prefers-contrast
   ============================================================================ */

/* --------------------------------------------------------------------------
   1) SKIP-LINK — primo elemento tabulabile della pagina.
   Nascosto finche' non riceve il focus da tastiera, poi appare in alto.
   -------------------------------------------------------------------------- */
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:2000;
  background:var(--gold);color:#171308;
  font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.08em;
  padding:12px 20px;border-radius:10px;text-decoration:none;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
  transition:top .2s var(--ease);
}
.skip-link:focus{top:16px;outline:2px solid #171308;outline-offset:2px}

/* --------------------------------------------------------------------------
   2) FOCUS VISIBILE E COERENTE
   Un unico anello dorato per tutti gli elementi interattivi quando si naviga
   da tastiera. Non compare al click del mouse (:focus-visible).
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible{
  outline:2px solid var(--gold-soft);
  outline-offset:3px;
  border-radius:6px;
}
/* Sulle superfici scure (header, hero, footer) l'anello resta ben visibile. */
.site-header a:focus-visible,
.site-footer a:focus-visible,
.hero a:focus-visible,
.lux-hero a:focus-visible{
  outline-color:var(--gold-soft);
  outline-offset:4px;
}
/* Rimuove l'outline "grezzo" solo quando NON e' navigazione da tastiera. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible){outline:none}

/* Link testuali nel corpo pagina: sottolineatura all'hover/focus per chiarezza. */
main a:not(.btn):not(.nav-cta):not(.brand):not(.lux-btn):not(.lux-world):focus-visible{
  text-decoration:underline;text-underline-offset:3px;
}

/* --------------------------------------------------------------------------
   3) LOGO IN ALTO — piu' presente e nitido, senza stravolgere l'header.
   -------------------------------------------------------------------------- */
.site-header .brand{padding:4px 0}
.site-header .brand-logo{
  width:176px;max-height:66px;
  /* leggero contrasto per staccare il logo dallo sfondo scuro dell'header */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
@media (max-width:600px){
  .site-header .brand-logo{width:142px;max-height:52px}
}

/* --------------------------------------------------------------------------
   4) MICRO-RIFINITURE PREMIUM
   Ammorbidiscono i pochi angoli vivi rimasti e uniformano i campi form,
   per un aspetto piu' ordinato e istituzionale.
   -------------------------------------------------------------------------- */

/* Campi dei moduli (contatti, ecc.): angoli morbidi coerenti e focus chiaro. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select{
  border-radius:10px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus{
  box-shadow:0 0 0 3px rgba(176,138,78,.14);
}

/* Immagini del team: transizione morbida e bordo coerente (se non gia' definito). */
.team-photo,.member-photo{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}

/* Migliora il contrasto del testo "soft" nei footer scuri per la leggibilita'. */
.site-footer .footer-col p,
.site-footer .footer-col a{color:#c9c0af}
.site-footer .footer-col a:hover{color:var(--gold-soft)}

/* Target tattili piu' generosi su mobile per i link di navigazione. */
@media (max-width:900px){
  .main-nav a{padding-top:12px;padding-bottom:12px}
}

/* --------------------------------------------------------------------------
   5) PREFERENZE DELL'UTENTE
   -------------------------------------------------------------------------- */
/* Blocco «riduci movimento» rimosso su richiesta del cliente:
   su macOS disattivava TUTTE le animazioni del sito. */

/* Contrasto elevato: rende i filetti e i bordi piu' netti. */
@media (prefers-contrast:more){
  .main-nav a{color:#fff}
  :root{--line:#cbbfa6;--line-2:#c0b399}
}

/* Assicura che il contenitore principale sia un bersaglio valido per lo skip-link. */
#main:focus{outline:none}

/* --------------------------------------------------------------------------
   6) reCAPTCHA sui moduli pubblici
   -------------------------------------------------------------------------- */
.recaptcha-box{margin:18px 0 6px;display:flex;justify-content:flex-start}
.recaptcha-box > div{max-width:100%}
.recaptcha-error{
  display:none;margin-top:12px;color:#b8574b;font-size:.86rem;
  background:rgba(184,87,75,.08);border:1px solid rgba(184,87,75,.4);
  border-radius:10px;padding:10px 14px;
}
/* Sui moduli su fondo scuro (accesso prodotti) manteniamo leggibilita'. */
.access-form .recaptcha-box{justify-content:center}

/* ============================================================================
   CONSENSO AI SERVIZI DI TERZE PARTI  (vedi js/consent.js)
   Stili del segnaposto che sostituisce la mappa Google Maps quando il consenso
   non e' stato prestato, e della nota informativa nel banner cookie.
   ========================================================================== */
.map-embed .map-placeholder{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:14px;height:100%;min-height:220px;padding:26px 22px;text-align:center;
  background:rgba(0,0,0,.04);
  border:1px dashed var(--line,rgba(0,0,0,.18));
  border-radius:var(--r,14px);
}
.map-embed .map-placeholder p{margin:0;font-size:.9rem;font-weight:300;line-height:1.5}
.map-embed .map-placeholder-actions{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;
}
.map-embed .map-placeholder-actions .btn{font-size:.84rem;padding:9px 16px}

/* Il banner e' in colonna quando mostra anche la nota contestuale. */
.cookie-banner .cookie-note{
  width:100%;margin:0 0 4px;font-size:.88rem;font-weight:400;
  color:var(--gold,#c9a227);
}
.cookie-banner:has(.cookie-note){flex-wrap:wrap}

/* Collegamento per rivedere la scelta sui cookie (Cookie Policy). */
.consent-reset{
  background:none;border:0;padding:0;font:inherit;color:inherit;
  text-decoration:underline;cursor:pointer;
}

/* ============================================================
   INTESTAZIONE DI PAGINA INTEGRATA (.page-head)
   Sostituisce la fascia .page-hero a tutta altezza presente sulle
   pagine interne. Occhiello, titolo e sottotitolo compaiono una
   sola volta, all'interno della prima sezione di contenuto, senza
   essere ripetuti piu' in basso.
   ============================================================ */
.page-head{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,3.6vw,64px);
  align-items:end;
  padding-bottom:clamp(28px,3.2vw,44px);
  margin-bottom:clamp(40px,4.6vw,68px);
  border-bottom:1px solid var(--line-d2,rgba(214,199,164,.16));
}
.page-head .eyebrow{margin-bottom:16px}
.page-head-main{min-width:0}
.page-head-aside{min-width:0}
.page-head-title{
  margin:0;
  font-family:inherit;
  font-size:clamp(2.05rem,3.4vw,3.05rem);
  line-height:1.09;
  font-weight:500;
  letter-spacing:-.015em;
  color:#fff;
  max-width:20ch;
}
.page-head-lead{
  margin:0;
  max-width:54ch;
  font-size:clamp(1rem,.92vw,1.08rem);
  font-weight:300;
  line-height:1.8;
  color:var(--cream-text,#e4dccb);
}
.page-head-lead:before{
  content:"";display:block;width:46px;height:1px;
  background:var(--gold-soft,#d6c7a4);opacity:.85;margin-bottom:20px;
}
.page-head-note{
  margin:18px 0 0;max-width:54ch;
  font-size:.9rem;line-height:1.7;font-weight:300;
  color:var(--soft,#a89e90);
}
.page-head-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.page-head-actions .btn{margin:0}

/* Variante senza sottotitolo (pagine legali): colonna unica. */
.page-head.is-compact{grid-template-columns:1fr;align-items:start}
.page-head.is-compact .page-head-title{max-width:24ch}

/* Sotto-intestazione di sezione: gerarchia ridotta, non compete con l'H1. */
.page-subhead{margin-bottom:clamp(24px,2.6vw,36px)}
.page-subhead .eyebrow{margin-bottom:12px}
.page-subhead-title{
  margin:0;
  font-size:clamp(1.4rem,1.85vw,1.85rem);
  line-height:1.2;font-weight:500;letter-spacing:-.01em;color:#fff;
}
.page-subhead-lead{
  margin:14px 0 0;max-width:70ch;
  font-size:.95rem;line-height:1.72;font-weight:300;
  color:var(--cream-text,#e4dccb);
}

/* Respiro in apertura di pagina, ora che la fascia hero e' stata rimossa. */
body:not(.v13-home) .page-open{padding-top:clamp(116px,8.4vw,150px)}
body:not(.v13-home) .fx-section.page-open{padding-top:clamp(116px,8.4vw,150px)}
body:not(.v13-home) .section.page-open{padding-top:clamp(116px,8.4vw,150px)}

@media(max-width:980px){
  .page-head{grid-template-columns:1fr;align-items:start;gap:22px}
  .page-head-title{max-width:none;font-size:clamp(1.95rem,6vw,2.5rem)}
  .page-head-lead:before{margin-bottom:16px}
  body:not(.v13-home) .page-open,
  body:not(.v13-home) .fx-section.page-open,
  body:not(.v13-home) .section.page-open{padding-top:104px}
}

/* ============================================================
   COPERTINA DI PAGINA A TUTTO SCHERMO (.page-cover)
   Apertura in stile "cover": logo, titolo e sottotitolo occupano
   la prima schermata; i contenuti si raggiungono scorrendo.
   Usata sulla pagina Prodotti.
   ============================================================ */
body[data-cover-page] #main{padding-top:0}

.page-cover{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(110px,13vh,150px) 24px clamp(120px,14vh,160px);
  overflow:hidden;
}
/* Immagine della copertina.
   Si imposta dal pannello admin (campo "Immagine di copertina"): il CMS
   scrive background-image direttamente su questa sezione.
   In alternativa, a mano, sul tag <section>:
   style="background-image:url('/assets/nome-file.jpg')"  (percorso assoluto). */
.page-cover{
  background-image:var(--cover-img,none);
  background-size:cover;
  background-position:var(--cover-pos,center center);
  background-repeat:no-repeat;
  background-attachment:fixed;   /* stessa inquadratura dello sfondo pagina */
  background-color:#0d0d0c;
}
/* Velo di leggibilita' sopra l'immagine. Il tono sul bordo inferiore e'
   identico a quello con cui inizia la fascia: il passaggio e' un taglio
   netto e allineato fra due fotografie, senza sfumature ne' filetti. */
.page-cover:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,9,.72) 0%,rgba(10,10,9,.46) 46%,
             rgba(10,10,9,.55) 100%);
}
/* Nessun filetto tra copertina e fascia. */
.page-cover{border-bottom:0}
.page-cover-inner{
  position:relative;z-index:2;width:min(920px,100%);
  animation:pageCoverIn 1.05s var(--ease,cubic-bezier(.22,1,.36,1)) both;
}
.page-cover-logo{
  display:block;width:clamp(148px,15vw,212px);height:auto;
  margin:0 auto clamp(30px,4vh,44px);opacity:.97;
}
.page-cover .eyebrow{margin-bottom:22px}
.page-cover-title{
  margin:0;
  font-size:clamp(2.3rem,4.8vw,4.1rem);
  line-height:1.08;font-weight:500;letter-spacing:-.02em;color:#fff;
  text-shadow:0 20px 52px rgba(0,0,0,.55);
}
.page-cover-lead{
  margin:clamp(22px,2.6vh,30px) auto 0;max-width:58ch;
  font-size:clamp(1rem,1vw,1.14rem);font-weight:300;line-height:1.85;
  color:var(--cream-text,#e4dccb);
}
.page-cover-scroll{
  position:absolute;left:50%;bottom:clamp(26px,4vh,52px);transform:translateX(-50%);
  z-index:2;display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  text-decoration:none;color:var(--gold-soft,#d6c7a4);
  font-family:var(--sans);font-size:.64rem;letter-spacing:.24em;
  text-transform:uppercase;font-weight:600;opacity:.82;
  transition:opacity .4s var(--ease,ease);
}
.page-cover-scroll:hover,.page-cover-scroll:focus-visible{opacity:1}
.page-cover-scroll svg{animation:pageCoverArrow 2.2s ease-in-out infinite}

/* La sezione che segue la copertina non ha bisogno del vuoto di testata. */
.page-cover-next{padding-top:clamp(74px,7vw,112px)}

/* Sotto-intestazione con pulsante allineato a destra. */
.page-subhead.has-actions{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;
}
.page-subhead.has-actions>div:first-child{min-width:0;flex:1 1 420px}
.page-subhead.has-actions .page-head-actions{margin-top:0}

@keyframes pageCoverIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes pageCoverArrow{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .page-cover-inner{animation:none}
  .page-cover-scroll svg{animation:none}
}
@media(max-width:720px){
  .page-cover{min-height:92svh;padding-left:20px;padding-right:20px}
  .page-cover-title{font-size:clamp(1.95rem,7.4vw,2.7rem)}
}

/* Sezioni "esperienza" dopo la copertina: allineo la spaziatura superiore. */
body[data-cover-page] .fx-section.page-cover-next{padding-top:clamp(74px,7vw,112px)}
/* Nota introduttiva rimasta come primo elemento della sezione. */
.page-cover-next .wrap>.page-head-note:first-child{margin:0 0 clamp(22px,2.6vw,34px)}

/* ============================================================
   FASCIA FOTOGRAFICA (.page-band)
   Banda a tutta larghezza con immagine propria, sullo stesso
   principio della banda "Lugano" della home: l'immagine resta
   ferma mentre la pagina scorre.
   L'immagine si imposta dal pannello admin (data-cms-src).
   ============================================================ */
.page-band{
  position:relative;
  height:min(52vh,420px);
  margin-top:-1px;            /* evita la riga di un pixel sul bordo */
  overflow:hidden;
  background:transparent;      /* l'immagine e' quella di sfondo della pagina */
}
/* Velo: stesso tono della copertina sul bordo superiore, poi si richiude
   sul tono delle sezioni di contenuto che seguono. */
.page-band:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,9,.55) 0%,rgba(10,10,9,.42) 28%,
             rgba(11,11,10,.46) 68%,rgba(13,13,12,.66) 100%);
}
.page-band-inner{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(30px,4vh,46px);
}
.page-band-inner .eyebrow{margin-bottom:14px}
.page-band-quote{
  margin:0;max-width:26ch;
  font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.22;font-weight:500;
  letter-spacing:-.015em;color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.55);
}
.page-band-quote .gold,.page-band-quote .accent{color:var(--gold-soft,#d6c7a4)}
@media(max-width:720px){
  .page-band{height:42vh}
}


/* Home — banda fotografica "Lugano": tolgo solo la riga di un pixel sul
   bordo, senza modificare i veli originali. */
body .fx-vista{margin-top:-1px}

/* Su iOS/Android background-attachment:fixed non e' affidabile: la copertina
   torna a scorrere con la pagina, dove l'effetto non e' comunque percepibile. */
@media(max-width:900px),(hover:none){
  .page-cover{background-attachment:scroll}
}

/* ============================================================
   TESTATA TRASPARENTE SULLE PAGINE CON COPERTINA
   Stesso comportamento della home: barra trasparente all'apertura,
   fondo scuro con sfocatura appena si scorre (classe .scrolled
   aggiunta da js/main.js oltre i 24px di scorrimento).
   ============================================================ */
body[data-cover-page] .site-header{
  position:fixed;
  background:transparent;
  border-bottom-color:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body[data-cover-page] .site-header.scrolled{
  background:rgba(13,13,12,.92);
  border-bottom-color:var(--line-d);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
}
/* Con il menu mobile aperto la barra deve restare leggibile. */
body[data-cover-page] .site-header:has(#mainNav.open){
  background:rgba(10,10,9,.96);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
}