/* =============================================================
   ELETHOS — styles.css
   Shared styles: tokens, reset, typography, layout, components.
   In production: /assets/css/styles.css
   Page-specific CSS stays in each page's own <style> block.
   ============================================================= */


/* ── 0. SELF-HOSTED FONTS ─────────────────────────────────── */
/* In production change path to /assets/fonts/ */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../assets/fonts/bricolage-grotesque-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../assets/fonts/bricolage-grotesque-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../assets/fonts/bricolage-grotesque-700-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: url('../../assets/fonts/dm-sans-300-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../assets/fonts/dm-sans-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../assets/fonts/dm-sans-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../assets/fonts/dm-sans-700-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../assets/fonts/jetbrains-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../assets/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
}

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --color-forest:     #0F2A22;
  --color-gold:       #E5B546;
  --color-sienna:     #C97D5F;
  --color-offwhite:   #F8F4EC;
  --color-cream:      #F6F2E8;
  --color-white:      #FFFFFF;
  --color-ink:        #2C2C2A;
  --color-muted:      #888070;
  --color-border:     #D4CFC4;

  /* Semantic aliases */
  --base:             var(--color-cream);
  --base-light:       var(--color-white);
  --primary:          var(--color-forest);
  --accent:           var(--color-gold);
  --secondary:        var(--color-sienna);
  --shade:            var(--color-ink);
  --shade-medium:     var(--color-muted);
  --neutral-light:    var(--color-border);

  /* Fonts */
  --font-heading:     'Bricolage Grotesque', 'Sora', system-ui, sans-serif;
  --font-body:        'DM Sans', system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid type scale */
  --text-xxs: clamp(.6875rem, .65rem  + .15vw, .75rem);
  --text-xs:  clamp(.75rem,   .7rem   + .2vw,  .8125rem);
  --text-s:   clamp(.875rem,  .85rem  + .15vw, .9375rem);
  --text-m:   clamp(1rem,     .95rem  + .25vw, 1.0625rem);
  --text-l:   clamp(1.125rem, 1.05rem + .35vw, 1.25rem);
  --h3:       clamp(1.25rem,  1.1rem  + .7vw,  1.5rem);
  --h2:       clamp(1.75rem,  1.4rem  + 1.5vw, 2.25rem);
  --h2-l:     clamp(1.875rem, 1.4rem  + 2vw,   2.5rem);
  --h1:       clamp(1.875rem, 1.3rem  + 1.8vw, 2.625rem); /* inner pages default; home overrides */

  /* Layout */
  --container-max:  1200px;
  --container-pad:  clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --section-py:     clamp(4.5rem, 3rem + 5vw,  7rem);

  /* Misc */
  --gap-grid:       1.5rem;
  --radius:         2px;
  --shadow-card:    0 4px 20px rgba(15,42,34,.08);
}


/* ── Skip-to-content (accessibility) ───────────────────────── */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;top:1rem;left:1rem;z-index:9999;padding:.65rem 1.25rem;background:var(--accent);color:var(--primary);font-family:var(--font-body);font-weight:500;font-size:var(--text-s);border-radius:var(--radius);width:auto;height:auto;outline:2px solid var(--primary)}

/* ── 2. RESET ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--base);
  color: var(--shade);
  font-family: var(--font-body);
  font-size: var(--text-m);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg  { display: block; max-width: 100% }
a         { color: inherit; text-decoration: none }
button    { font: inherit; cursor: pointer; border: 0; background: none; color: inherit }
ul, ol    { list-style: none; padding: 0; margin: 0 }
input, textarea, select { font: inherit; color: inherit }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}


/* ── 3. BASE TYPOGRAPHY ─────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--primary);
  margin: 0;
  line-height: 1.1;
  letter-spacing: .02em;
}
h1 { font-size: var(--h1);   letter-spacing: .025em; line-height: 1.05 }
h2 { font-size: var(--h2-l); letter-spacing: .015em }
h3 { font-size: var(--h3);   line-height: 1.25; letter-spacing: .015em }

.text--s  { font-size: var(--text-s) }
.text--l  { font-size: var(--text-l); line-height: 1.6 }
.mono     { font-family: var(--font-mono) }


/* ── 4. UTILITIES ───────────────────────────────────────────── */
.bg--base         { background: var(--base) }
.bg--base-light   { background: var(--base-light) }
.bg--primary      { background: var(--primary); color: var(--color-offwhite) }
.bg--primary h1,
.bg--primary h2,
.bg--primary h3   { color: var(--color-offwhite) }
.color--muted     { color: var(--shade-medium) }
.color--accent    { color: var(--accent) }
.color--secondary { color: var(--secondary) }
.color--offwhite  { color: var(--color-offwhite) }


/* ── 5. LAYOUT ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  position: relative;
}
.container--narrow { max-width: 880px; margin-inline: auto }

.section {
  padding-block: var(--section-py);
  position: relative;
  overflow: clip;
}


/* ── 6. EYEBROW ─────────────────────────────────────────────── */
/* Mono eyebrow: — · LABEL (v2 atelier standard) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: var(--text-xxs);
  color: var(--shade-medium);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.eyebrow .dot {
  width: 6px;
  height: 6px;
  background: var(--secondary);
  display: inline-block;
}
.bg--primary .eyebrow { color: var(--accent); opacity: .8 }


/* ── 7. SECTION METADATA ────────────────────────────────────── */
.section-index {
  position: absolute;
  top: 1.75rem;
  right: var(--container-pad);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--shade-medium);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.section-index .glyph { color: var(--secondary); font-weight: 500 }
.bg--primary .section-index { color: var(--accent); opacity: .55 }

.ticks {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  height: 10px;
}
.ticks span { width: 1px; background: currentColor; opacity: .4; height: 5px }
.ticks span:nth-child(2) { height: 8px }
.ticks span:nth-child(4) { height: 10px; opacity: .9 }


/* ── 8. PAGE EDGE RULER ─────────────────────────────────────── */
.page-edge-ruler {
  position: fixed;
  top: 64px;
  bottom: 0;
  left: 0;
  width: 28px;
  z-index: 5;
  pointer-events: none;
  display: none;
  background-image:
    linear-gradient(to bottom, transparent 0, transparent 19px, rgba(15,42,34,.18) 19px, rgba(15,42,34,.18) 20px, transparent 20px),
    linear-gradient(to bottom, transparent 0, transparent 99px, rgba(15,42,34,.4) 99px, rgba(15,42,34,.4) 100px, transparent 100px);
  background-size: 100% 20px, 100% 100px;
  border-right: 1px solid rgba(15,42,34,.08);
}
@media(min-width:1280px) { .page-edge-ruler { display: block } }


/* ── 9. BUTTONS ─────────────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-s);
  letter-spacing: .04em;
  padding: .9rem 1.6rem;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--color-offwhite);
  border: 1px solid var(--primary);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, padding .25s ease;
}
.button .arrow { display: inline-block; transition: transform .3s ease }
.button:hover  { background: var(--accent); color: var(--primary); border-color: var(--accent); padding-right: 1.9rem }
.button:hover .arrow { transform: translateX(4px) }

.button--secondary {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.button--secondary:hover { background: var(--primary); color: var(--color-offwhite) }

.button--tertiary {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.button--tertiary:hover { background: var(--accent); color: var(--primary); border-color: var(--accent) }

.button--small { padding: .5rem 1rem; font-size: var(--text-xs) }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--primary);
  font-weight: 500;
  font-size: var(--text-s);
  letter-spacing: .04em;
  position: relative;
  padding-bottom: 4px;
  transition: color .25s ease, gap .25s ease;
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  opacity: .25;
  transition: background .25s ease, opacity .25s ease;
}
.link-arrow:hover { color: var(--accent); gap: .8rem }
.link-arrow:hover::after { background: var(--accent); opacity: 1 }
.bg--primary .link-arrow { color: var(--accent) }


/* ── 10. HEADER & NAV ───────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--primary);
  border-bottom: 1px solid rgba(229,181,70,.22);
  height: 72px;
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-header__logo svg { height: 50px; width: auto }
.brand-block svg { height: 30px; width: auto }

.site-nav { display: flex; align-items: center; gap: 1rem }
.site-nav__list { display: flex; align-items: center; gap: 1rem }
.site-nav__link {
  position: relative;
  color: var(--color-offwhite);
  opacity: .8;
  font-size: var(--text-s);
  letter-spacing: .02em;
  padding: 6px 0;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.site-nav__link:hover    { opacity: 1 }
.site-nav__link.is-current { opacity: 1; color: var(--accent) }
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.site-nav__link:hover::after,
.site-nav__link.is-current::after { transform: scaleX(1) }

/* Dropdown */
.has-dropdown { position: relative }

/* Chevron — resetta le proprietà dell'underline animate e crea il triangolino */
.has-dropdown > .site-nav__link::after {
  /* reset underline */
  position: static;
  left: auto; right: auto; bottom: auto;
  background: transparent;
  transform-origin: center;
  /* chevron */
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-right: 1.2px solid currentColor;
  border-bottom: 1.2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 5px;
  vertical-align: middle;
  opacity: .65;
  transition: transform .2s ease, opacity .2s ease;
}
/* Mantieni il chevron anche su hover/current — non applicare scaleX */
.has-dropdown > .site-nav__link:hover::after,
.has-dropdown > .site-nav__link.is-current::after {
  transform: rotate(225deg) translateY(2px); /* ruota verso l'alto su hover */
  opacity: 1;
}
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: -16px;
  background: var(--primary);
  border: 1px solid rgba(229,181,70,.25);
  border-radius: var(--radius);
  min-width: 320px;
  padding: .5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  /* Griglia 2 colonne per i servizi */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown a {
  display: block;
  padding: .55rem 1rem;
  color: var(--color-offwhite);
  opacity: .8;
  font-size: var(--text-xs);
  border-radius: 2px;
  transition: opacity .15s ease, color .15s ease, background .15s ease;
  line-height: 1.3;
}
.dropdown a:hover,
.dropdown a.is-active { opacity: 1; color: var(--accent); background: rgba(229,181,70,.06) }

/* Language link (replaces JS toggle in production) */
.lang-toggle-link {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  color: var(--color-offwhite);
  opacity: .6;
  letter-spacing: .14em;
  padding: 4px 6px;
  border-radius: var(--radius);
  transition: opacity .2s ease, color .2s ease;
}
.lang-toggle-link:hover { opacity: 1; color: var(--accent) }

/* Language toggle (kept for compatibility) */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  color: var(--color-offwhite);
  opacity: .6;
  letter-spacing: .14em;
}
.lang-toggle button { padding: 4px 6px; color: inherit; border-radius: var(--radius); transition: color .2s ease, opacity .2s ease }
.lang-toggle button.is-active { color: var(--accent); opacity: 1 }
.lang-toggle .sep { opacity: .4 }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 28px; height: 28px;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.nav-toggle svg { width: 22px; height: 22px }


/* ── 11. RESPONSIVE NAV ─────────────────────────────────────── */
@media(max-width:1080px) {
  .site-nav__list,
  .has-dropdown .dropdown { display: none }
  .nav-toggle { display: inline-flex }
  .lang-toggle { margin-left: auto }
  .header-cta-desktop { display: none }
}


/* ── 12. MOBILE DRAWER ──────────────────────────────────────── */
.mobile-drawer {
  position: fixed;
  inset: 0;
  background: var(--primary);
  z-index: 200;
  padding: 5rem var(--container-pad) 8rem;
  transform: translateX(-100%);
  transition: transform .3s ease;
  overflow-y: auto;
}
.mobile-drawer.is-open  { transform: translateX(0) }
.mobile-drawer .close   { position: absolute; top: 1.25rem; right: 1.25rem; color: var(--accent) }
.mobile-drawer ul       { display: flex; flex-direction: column; gap: 1.25rem }
.mobile-drawer a {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-offwhite);
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(229,181,70,.15);
}
.mobile-drawer .lang-toggle-drawer {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(229,181,70,.15);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-offwhite);
  opacity: .7;
  letter-spacing: .14em;
}
.mobile-drawer .lang-toggle-drawer button { padding: 6px 10px; color: inherit; border-radius: var(--radius) }
.mobile-drawer .lang-toggle-drawer button.is-active { color: var(--accent); opacity: 1 }

.mobile-cta { display: none }
@media(max-width:1080px) {
  .mobile-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: .85rem var(--container-pad);
    background: var(--accent);
    color: var(--primary);
    text-align: center;
    font-weight: 500;
    letter-spacing: .04em;
    border-top: 1px solid rgba(15,42,34,.1);
  }
  body { padding-bottom: 56px }
}


/* ── 13. FOOTER ─────────────────────────────────────────────── */
.site-footer {
  background: var(--primary);
  color: var(--color-offwhite);
  padding-top: clamp(3.5rem, 2rem + 4vw, 5.5rem);
  padding-bottom: 1.5rem;
  border-top: 1px solid rgba(229,181,70,.22);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 6px;
  background-image: linear-gradient(to right, var(--accent) 0, var(--accent) 24px, transparent 24px, transparent 100%);
  background-size: 120px 6px;
  background-repeat: repeat-x;
  opacity: .25;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
@media(max-width:900px) { .site-footer__grid { grid-template-columns: repeat(2,1fr); row-gap: 2.5rem } }
@media(max-width:560px) { .site-footer__grid { grid-template-columns: 1fr } }

.site-footer__col h4 {
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--text-xxs);
  letter-spacing: .26em;
  color: var(--accent);
  margin-bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.site-footer__col h4::before {
  content: "";
  display: inline-block;
  width: 16px; height: 1px;
  background: var(--accent);
  opacity: .5;
}
.site-footer__col ul   { display: flex; flex-direction: column; gap: .65rem }
.site-footer__col a    { color: var(--color-offwhite); opacity: .75; font-size: var(--text-s); transition: opacity .2s ease, color .2s ease }
.site-footer__col a:hover { opacity: 1; color: var(--accent) }
.site-footer .brand-block svg { height: 44px; width: auto; margin-bottom: 1rem }
.site-footer .brand-block p   { color: var(--shade-medium); font-size: var(--text-s); max-width: 28ch; line-height: 1.6 }

.site-footer__bottom {
  border-top: 1px solid rgba(229,181,70,.18);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  color: var(--shade-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.site-footer__bottom .links { display: flex; gap: 1.25rem }
.site-footer__bottom a:hover { color: var(--accent) }


/* ── 14. BREADCRUMB ─────────────────────────────────────────── */
.breadcrumb {
  background: var(--primary);
  border-bottom: 1px solid rgba(229,181,70,.18);
  padding: 1rem 0;
}
.breadcrumb__inner {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-offwhite);
  opacity: .7;
}
.breadcrumb a         { color: var(--accent); opacity: .8; transition: opacity .2s ease }
.breadcrumb a:hover   { opacity: 1 }
.breadcrumb__sep      { color: var(--secondary); opacity: .7 }
.breadcrumb__current  { opacity: .9 }


/* ── 15. SECTION DIVIDER ────────────────────────────────────── */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--base);
  border-bottom: 1px solid var(--neutral-light);
}
.section-divider svg { width: 100%; max-width: 1200px; height: 24px }


/* ── 16. CARD CORNER BRACKETS ───────────────────────────────── */
/* Used by .card and .logo-slot via JS-added .br-bl/.br-br spans */
.card::before, .card::after,
.card > .br-bl, .card > .br-br {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--accent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease, width .3s ease, height .3s ease;
}
.card::before  { top: -1px;    left: -1px;  border-right: 0; border-bottom: 0 }
.card::after   { top: -1px;    right: -1px; border-left: 0;  border-bottom: 0 }
.card > .br-bl { bottom: -1px; left: -1px;  border-right: 0; border-top: 0 }
.card > .br-br { bottom: -1px; right: -1px; border-left: 0;  border-top: 0 }
.card:hover::before, .card:hover::after,
.card:hover > .br-bl, .card:hover > .br-br { opacity: 1; width: 16px; height: 16px }


/* ── 17. NOINDEX BADGE (Privacy / staging pages) ────────────── */
.noindex-badge {
  background: rgba(201,125,95,.12);
  border-top: 2px solid var(--secondary);
  border-bottom: 2px solid var(--secondary);
  padding: .85rem 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--secondary);
}
.noindex-badge .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--secondary);
  border-radius: 50%;
  margin: 0 .5rem;
  vertical-align: middle;
}


/* ── 18. ANIMATIONS ─────────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease-out, transform .55s ease-out;
  will-change: opacity, transform;
}
.fade-in.is-visible { opacity: 1; transform: translateY(0) }

@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .001ms !important;
  }
  .fade-in { opacity: 1; transform: none }
}


/* ── 19. I18N LANGUAGE TOGGLE ───────────────────────────────── */
[data-i18n-en]                   { display: none }
html[data-lang="en"] [data-i18n-it] { display: none }
html[data-lang="en"] [data-i18n-en] { display: inline }
html[data-lang="en"] [data-i18n-en].block { display: block }


/* ── 20. SHARED JS SCRIPT BLOCK ─────────────────────────────── */
/*
   Each page includes this JS inline (or link to scripts.js):
   - Language toggle (data-set-lang / localStorage)
   - Fade-in IntersectionObserver
   - Mobile drawer open/close + Escape key
   These are not CSS — reminder to extract to scripts.js later.
*/

/* ── Logo clienti ───────────────────────────────────────────────── */
.logo-img{max-width:120px;max-height:40px;object-fit:contain;filter:grayscale(1) brightness(0.6)}
.logo-slot:hover .logo-img{filter:none}

/* ── Cookie banner ──────────────────────────────────────────────── */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:300;background:var(--primary);color:var(--color-offwhite);padding:1.25rem var(--container-pad);border-top:1px solid rgba(229,181,70,.22);transform:translateY(0);transition:transform .35s ease}
.cookie-banner.is-hidden{transform:translateY(110%)}
.cookie-banner__inner{max-width:1200px;margin-inline:auto;display:flex;flex-direction:column;gap:1rem}
.cookie-banner__top{display:grid;grid-template-columns:1fr auto;gap:1.25rem;align-items:center}
@media(max-width:780px){.cookie-banner__top{grid-template-columns:1fr;gap:.85rem}}
.cookie-banner__text{font-size:var(--text-s);color:var(--color-offwhite);opacity:.9;line-height:1.55;margin:0}
.cookie-banner__text a.cookie-banner__link{color:var(--accent);border-bottom:1px solid rgba(229,181,70,.4);transition:opacity .2s ease}
.cookie-banner__text a.cookie-banner__link:hover{opacity:.75}
.cookie-banner__actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;flex-shrink:0}
.cookie-banner__btn{display:inline-flex;align-items:center;font-family:var(--font-body);font-weight:500;font-size:var(--text-s);letter-spacing:.04em;padding:.6rem 1.1rem;border-radius:var(--radius);cursor:pointer;border:1px solid;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.cookie-banner__btn--primary{background:var(--accent);color:var(--primary);border-color:var(--accent)}
.cookie-banner__btn--primary:hover{background:var(--color-offwhite);border-color:var(--color-offwhite)}
.cookie-banner__btn--secondary{background:transparent;color:var(--color-offwhite);border-color:rgba(229,181,70,.45)}
.cookie-banner__btn--secondary:hover{border-color:var(--color-offwhite)}
.cookie-banner__btn--ghost{background:transparent;color:rgba(255,255,255,.55);border-color:transparent;padding-inline:.5rem}
.cookie-banner__btn--ghost:hover{color:var(--color-offwhite)}
/* Categorie */
.cookie-banner__categories{border-top:1px solid rgba(229,181,70,.15);padding-top:1rem;display:flex;flex-direction:column;gap:.65rem}
.cookie-cat{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem .75rem;background:rgba(255,255,255,.04);border:1px solid rgba(229,181,70,.1);border-radius:var(--radius)}
.cookie-cat__label{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;cursor:pointer}
.cookie-cat__info{display:flex;flex-direction:column;gap:.15rem}
.cookie-cat__info strong{font-size:var(--text-s);color:var(--color-offwhite);font-weight:500}
.cookie-cat__info span{font-size:var(--text-xs);color:rgba(255,255,255,.5);line-height:1.4}
.cookie-cat__badge{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:rgba(229,181,70,.12);padding:.25rem .55rem;border-radius:3px;white-space:nowrap;flex-shrink:0}
/* Toggle switch */
.cookie-cat__toggle{position:relative;appearance:none;-webkit-appearance:none;width:36px;height:20px;background:rgba(255,255,255,.15);border-radius:10px;cursor:pointer;flex-shrink:0;transition:background .2s;border:none;outline:none}
.cookie-cat__toggle::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s}
.cookie-cat__toggle:checked{background:var(--accent)}
.cookie-cat__toggle:checked::after{transform:translateX(16px)}
.cookie-cat__toggle:focus-visible{box-shadow:0 0 0 3px rgba(229,181,70,.4)}
.cookie-banner__save-row{display:flex;justify-content:flex-end;padding-top:.25rem}