/* ==========================================================================
   ELKLAND — ricostruzione fedele del progetto Adobe XD "SITO ELKLAND 06-08-26"
   Token (colori, font, dimensioni, spaziature) estratti dal file XD.
   Artboard di riferimento: 1920 px di larghezza.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Palette XD */
  --el-green:      #BCC082;
  --el-green-soft: #C8C8B9;
  --el-grey:       #707070;
  --el-grey-mid:   #808080;
  --el-grey-light: #B5B5B5;
  --el-navy:       #13355D;
  --el-blue:       #2066B5;
  --el-blue-pale:  #C4CDCE;
  --el-link:       #4351D0;
  --el-red:        #F82C31;
  --el-black:      #000;
  --el-white:      #fff;

  /* Unita di scala: 1 = 1 px sull'artboard XD da 1920 px.
     Ricalcolata in JS su clientWidth per evitare il salto della scrollbar. */
  --u: calc(100vw / 1920);

  /* Metriche reali dei webfont (ascent, ascent+descent) */
  --fa: 1.04;
  --fd: 1.26;

  /* Bootstrap overrides */
  --bs-body-font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  --bs-body-color: #707070;
  --bs-body-bg: #fff;
  --bs-link-color-rgb: 67, 81, 208;
  --bs-border-color: #707070;
}

/* ---------- 2. Base ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--el-grey);
  background: var(--el-white);
  overflow-x: hidden;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

.site {                      /* la pagina scala fino a 2560 px */
  max-width: 2560px;
  margin-inline: auto;
  position: relative;
}

img { max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* Famiglie + metriche associate */
.f-pjs { font-family: "Plus Jakarta Sans", system-ui, sans-serif; --fa: 1.04; --fd: 1.26; }
.f-sg  { font-family: "Space Grotesk", system-ui, sans-serif;     --fa: .98;  --fd: 1.27; }
.f-bg  { font-family: "Bangers", system-ui, cursive;              --fa: .88;  --fd: 1.06; }

/* Pesi presenti nel file XD */
.w-xlight { font-weight: 200; }
.w-light  { font-weight: 300; }
.w-reg    { font-weight: 400; }
.w-med    { font-weight: 500; }
.w-semi   { font-weight: 600; }
.w-bold   { font-weight: 700; }
.w-xbold  { font-weight: 800; }

/* Colori */
.c-green  { color: var(--el-green); }
.c-greens { color: var(--el-green-soft); }
.c-grey   { color: var(--el-grey); }
.c-greym  { color: var(--el-grey-mid); }
.c-greyl  { color: var(--el-grey-light); }
.c-navy   { color: var(--el-navy); }
.c-black  { color: var(--el-black); }
.c-white  { color: var(--el-white); }
.c-red    { color: var(--el-red); }

.bg-green { background: var(--el-green); }
.bg-grey  { background: var(--el-grey); }
.bg-greym { background: var(--el-grey-mid); }
.bg-navy  { background: var(--el-navy); }
.bg-greyl { background: var(--el-grey-light); }

/* Corpi misti dentro un titolo (XD usa due dimensioni nella stessa riga) */
.s40 { font-size: .784em; }    /* 40 su 51 */
.s73 { font-size: 1.197em; }   /* 73 su 61 */

/* Barre sfumate (XD: gradient #BCC082 -> #FFFFFF 97%) */
.grad-r { background: linear-gradient(90deg, #BCC082 0%, rgba(255,255,255,.97) 100%); }
.grad-l { background: linear-gradient(270deg, #BCC082 0%, rgba(255,255,255,.97) 100%); }

/* ==========================================================================
   3. Sistema "stage": riproduzione 1:1 dell'artboard XD da >=1200 px,
      layout a flusso (Bootstrap) sotto i 1200 px.
   ========================================================================== */
.stage      { position: relative; width: 100%; }
.stage-art  { position: relative; }
.stage-copy { position: relative; }
.layer      { display: block; width: 100%; height: auto; }

/* Immagine posizionata resa cliccabile: il link prende il posto (.st) e
   l'immagine riempie il riquadro. */
.st-link { display: block; }
.st-link img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Riquadro con zoom/offset dell'immagine come nel pannello "fill" di XD
   (--k = larghezza in % del riquadro, --ox/--oy = ancoraggio in %) */
.fitbox { overflow: hidden; }
.fitbox img {
  position: absolute;
  width: calc(var(--k, 100) * 1%);
  height: auto;
  max-width: none;
  left: calc(var(--ox, 50) * 1%);
  top:  calc(var(--oy, 50) * 1%);
  transform: translate(calc(var(--ox, 50) * -1%), calc(var(--oy, 50) * -1%));
}

@media (min-width: 1200px) {
  .stage { aspect-ratio: 1920 / var(--h, 1080); overflow: hidden; }
  .stage-art,
  .stage-copy { position: absolute; inset: 0; }

  .st {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top:  calc(var(--y) * var(--u));
    margin: 0;
  }
  .st-w { width:  calc(var(--w) * var(--u)); }
  .st-h { height: calc(var(--h2) * var(--u)); }
  .st-r { left: auto; right: calc((1920 - var(--x)) * var(--u)); text-align: right; }
  /* centrato su --cx */
  .st-c {
    left: calc((var(--cx) - var(--w) / 2) * var(--u));
    width: calc(var(--w) * var(--u));
    text-align: center;
  }

  /* testo: --y e la BASELINE della prima riga, come in XD */
  .tx {
    font-size:   calc(var(--fs) * var(--u));
    line-height: calc(var(--lh, var(--fs)) * var(--u));
    letter-spacing: calc(var(--ls, 0) * .001em);
    top: calc((var(--y)
              - ((var(--lh, var(--fs)) - var(--fs) * var(--fd)) / 2 + var(--fs) * var(--fa)))
              * var(--u));
  }
  /* frame XD di tipo "area"/"autoHeight": --y e il bordo superiore del blocco */
  .tx-top { top: calc(var(--y) * var(--u)); }
  .tx .big { font-size: calc(var(--fsb) * var(--u)); }

  img.st, .box.st { width: calc(var(--w) * var(--u)); height: calc(var(--h2) * var(--u)); }
  img.st { object-fit: cover; }
  img.st.fit-contain { object-fit: contain; }
}

/* --- Mobile / tablet --- */
@media (max-width: 1199.98px) {
  .stage { display: flex; flex-direction: column; }
  .art-last { order: 2; }          /* immagine decorativa sotto al testo */

  /* Di base l'arte torna nel flusso: ogni immagine a piena larghezza. */
  .stage-art > .st { position: static; margin: 0 0 1rem; }
  .stage-art > .st.layer { width: 100%; height: auto; }
  .stage-art:not(.art-keep) > .st.box { display: none; }

  /* .art-keep conserva la composizione dell'artboard (immagini sovrapposte). */
  .stage-art.art-keep { aspect-ratio: 1920 / var(--ha, 1080); overflow: hidden; }
  .stage-art.art-keep > .st {
    position: absolute;
    margin: 0;
    left:   calc(var(--x)  / 19.2 * 1%);
    top:    calc(var(--y)  / var(--ha, 1080) * 100%);
    width:  calc(var(--w)  / 19.2 * 1%);
    height: calc(var(--h2) / var(--ha, 1080) * 100%);
    object-fit: cover;
  }
  .stage-art.art-keep > .st.fit-contain { object-fit: contain; }
  .stage-art.art-keep > .st.m-y0 { top: 0; }
  .stage-copy { padding: 2.5rem 1.25rem; }
  .stage-copy .st { position: static; width: auto !important; height: auto !important; text-align: inherit; }
  .d-desk { display: none !important; }
  .tx .big { font-size: 1.25em; }
}

/* Scala tipografica mobile */
@media (max-width: 1199.98px) {
  .tx { letter-spacing: calc(var(--ls, 0) * .001em); line-height: 1.25; margin-bottom: .85rem; }
  .t-hero  { font-size: clamp(2rem,    8.5vw, 3.5rem); }
  .t-h1    { font-size: clamp(1.75rem, 6.4vw, 3rem); }
  .t-h2    { font-size: clamp(1.5rem,  5.4vw, 2.5rem); }
  .t-h3    { font-size: clamp(1.25rem, 4.4vw, 2rem); }
  .t-h4    { font-size: clamp(1.1rem,  3.6vw, 1.6rem); }
  .t-h5    { font-size: clamp(1rem,    3vw,   1.35rem); }
  .t-body  { font-size: 1rem;     line-height: 1.6; }
  .t-small { font-size: .9375rem; line-height: 1.55; }
  .t-micro { font-size: .75rem;   line-height: 1.5; }
  .t-num   { font-size: clamp(4rem, 20vw, 9rem); line-height: .9; }
  .m-center { text-align: center !important; }
  .m-left   { text-align: left !important; }
  /* testi bianchi pensati sopra una foto: su mobile scorrono su fondo chiaro */
  .m-dark   { color: var(--el-grey) !important; }
  .tx.t-hero, .tx.t-h1, .tx.t-h2 { margin-bottom: 1.15rem; }
  .tx.t-h3, .tx.t-h4 { margin-bottom: .9rem; }
}

/* ==========================================================================
   4. Header / navigazione
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 1030; background: var(--el-white); }
.nav-logo img { display: block; }

@media (min-width: 1200px) {
  .nav-inner { position: relative; height: calc(124 * var(--u)); }
  .nav-logo  { position: absolute; left: calc(60.6 * var(--u)); top: calc(42.9 * var(--u)); }
  .nav-logo img { width: calc(198.4 * var(--u)); height: auto; }

  .nav-main { position: absolute; inset: 0; }
  .nav-item-x {
    position: absolute; top: calc(43 * var(--u));
    width: calc(123 * var(--u)); text-align: center;
    font-family: "Space Grotesk", sans-serif; font-weight: 700;
    font-size: calc(16 * var(--u)); line-height: calc(21 * var(--u));
    color: var(--el-black); text-transform: uppercase;
    transition: color .18s ease;
  }
  .nav-item-x:hover { color: var(--el-green); }
  .is-home { left: calc(1042 * var(--u)); }
  .is-cont { left: calc(1399 * var(--u)); }
  .is-coll { left: 0; }

  /* Campo di ricerca: presente nel design XD ma al momento NON nel markup.
     Le regole restano qui pronte, se va riattivato. */
  .nav-search {
    position: absolute; left: calc(1583 * var(--u)); top: calc(44 * var(--u));
    width: calc(192 * var(--u)); height: calc(37 * var(--u));
    border: 1px solid var(--el-grey); border-radius: 999px;
    display: flex; align-items: center; gap: calc(6 * var(--u));
    padding-inline: calc(13 * var(--u));
  }
  .nav-search svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); flex: none; }
  .nav-search input {
    border: 0; outline: 0; background: transparent; width: 100%;
    font-weight: 200; font-size: calc(14 * var(--u)); color: var(--el-grey);
  }
  .nav-sep {
    position: absolute; left: calc(1822.5 * var(--u)); top: calc(28.5 * var(--u));
    width: 1px; height: calc(69 * var(--u)); background: var(--el-grey);
  }
  /* Selettore lingua: nel design XD c'era il solo "ENG"; le due sigle stanno
     una sopra l'altra nello stesso spazio, quella attiva in nero */
  .nav-langs {
    position: absolute; left: calc(1859 * var(--u)); top: calc(31 * var(--u));
    width: calc(36 * var(--u));
    display: flex; flex-direction: column; gap: calc(4 * var(--u));
  }
  .nav-lang {
    text-align: center;
    font-family: "Space Grotesk", sans-serif; font-weight: 700;
    font-size: calc(16 * var(--u)); line-height: calc(21 * var(--u));
    color: var(--el-grey-light); transition: color .18s ease;
  }
  .nav-lang.active { color: var(--el-black); }
  .nav-lang:hover  { color: var(--el-green); }

  /* Dropdown "THE COLLECTIONS" (XD: pannello bianco 159x158, offset y +64) */
  .coll-menu {
    position: absolute; left: 0; top: calc(107 * var(--u));
    width: calc(159 * var(--u)); min-height: calc(158 * var(--u));
    background: var(--el-white);
    box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.14);
    padding: calc(28 * var(--u)) 0 calc(20 * var(--u)) calc(16 * var(--u));
    display: flex; flex-direction: column; gap: calc(24 * var(--u));
    opacity: 0; visibility: hidden; transform: translateY(calc(-6 * var(--u)));
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .coll-menu a {
    font-family: "Space Grotesk", sans-serif; font-weight: 700;
    font-size: calc(11 * var(--u)); line-height: 1.2; color: var(--el-black);
    text-transform: uppercase; transition: color .18s ease;
  }
  .coll-menu a:hover { color: var(--el-green); }
  .coll-zone:hover .coll-menu,
  .coll-menu:hover,
  .coll-menu.is-open { opacity: 1; visibility: visible; transform: none; }
  /* la zona sensibile resta dentro la barra: sotto ci pensa .coll-menu:hover */
  .coll-zone { position: absolute; left: calc(1228 * var(--u)); top: 0;
               width: calc(159 * var(--u)); height: calc(124 * var(--u)); }
  .nav-burger { display: none !important; }
}

@media (max-width: 1199.98px) {
  .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.25rem; }
  .nav-logo img { width: 150px; }
  .nav-desk { display: none !important; }
  .navbar-toggler { border: 0; padding: .25rem .4rem; box-shadow: none !important; }
  .offcanvas .nav-link,
  .offcanvas .dropdown-item {
    font-family: "Space Grotesk", sans-serif; font-weight: 700;
    color: #000; text-transform: uppercase; letter-spacing: .04em;
  }
  .offcanvas .nav-link:hover, .offcanvas .dropdown-item:hover { color: var(--el-green); }
}
/* Nella board XD la voce attiva resta nera: il verde e riservato all'hover. */
.offcanvas .nav-link.active { color: var(--el-green) !important; }
.coll-menu a.active { color: var(--el-green); }

/* ==========================================================================
   5. Footer
   ========================================================================== */
.site-footer { background: var(--el-green); color: var(--el-black); }
.site-footer a { color: var(--el-black); }
.site-footer a:hover { text-decoration: underline; }

@media (min-width: 1200px) {
  .foot-inner  { position: relative; height: calc(227 * var(--u)); }
  .foot-logo   { position: absolute; left: calc(108 * var(--u)); top: calc(39 * var(--u)); width: calc(134 * var(--u)); }
  .foot-addr   { position: absolute; left: calc(108 * var(--u)); top: calc(73 * var(--u)); width: calc(560 * var(--u));
                 font-weight: 300; font-size: calc(14 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: .1em; }
  .foot-legal  { position: absolute; left: calc(108 * var(--u)); top: calc(182 * var(--u));
                 font-weight: 300; font-size: calc(13 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: .1em; }
  .foot-news   { position: absolute; left: calc(1316 * var(--u)); top: calc(47 * var(--u)); width: calc(491 * var(--u)); }
  .foot-h   { font-weight: 700; font-size: calc(11.29 * var(--u)); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 calc(22 * var(--u)); }
  .foot-lnk { font-weight: 300; font-size: calc(14 * var(--u)); letter-spacing: .1em; }
  .news-row { display: flex; align-items: flex-end; border-bottom: 1px solid var(--el-grey); }
  .news-row input { border: 0; background: transparent; outline: 0; width: 100%;
                    font-weight: 300; font-size: calc(11.29 * var(--u)); letter-spacing: .1em;
                    color: var(--el-black); padding-bottom: calc(7 * var(--u)); }
  .news-row input::placeholder { color: var(--el-grey); }
  .btn-subscribe { margin-top: calc(10 * var(--u)); margin-left: auto; display: block;
                   background: var(--el-white); border: 0; border-radius: 999px;
                   width: calc(117 * var(--u)); height: calc(25 * var(--u));
                   font-weight: 300; font-size: calc(11.29 * var(--u)); letter-spacing: .1em; color: var(--el-black); }
}
@media (max-width: 1199.98px) {
  .foot-inner { padding: 2.5rem 1.25rem; }
  .foot-logo  { width: 134px; margin-bottom: 1rem; }
  .foot-news { margin-top: 2rem; }
  .foot-addr, .foot-legal { font-weight: 300; font-size: .875rem; letter-spacing: .08em; line-height: 1.7; }
  .foot-legal { margin-top: 1rem; }
  .foot-h   { font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .75rem; }
  .foot-lnk { font-weight: 300; font-size: .875rem; letter-spacing: .08em; }
  .news-row { display: flex; align-items: center; border-bottom: 1px solid var(--el-grey); }
  .news-row input { border: 0; background: transparent; outline: 0; width: 100%; font-size: .8rem; letter-spacing: .08em; color: #000; padding: .4rem 0; }
  .btn-subscribe { background: #fff; border: 0; border-radius: 999px; padding: .35rem 1.25rem; font-size: .7rem; letter-spacing: .1em; margin-top: .85rem; }
}
.btn-subscribe:hover { background: var(--el-black); color: var(--el-green); }

/* ==========================================================================
   6. Componenti ricorrenti
   ========================================================================== */
.btn-catalog {
  display: inline-block; background: var(--el-green); color: var(--el-black);
  font-weight: 500; text-transform: uppercase; letter-spacing: .1em; text-align: center;
  border: 0; border-radius: 999px; transition: background .2s ease, color .2s ease;
}
.btn-catalog:hover { background: var(--el-black); color: var(--el-green); text-decoration: none; }
@media (min-width: 1200px) {
  .btn-catalog { width: calc(199 * var(--u)); line-height: calc(32 * var(--u)); font-size: calc(11.29 * var(--u)); }
}
@media (max-width: 1199.98px) {
  .btn-catalog { padding: .7rem 1.5rem; font-size: .75rem; }
}

/* ==========================================================================
   7. Form contatti
   ========================================================================== */
.el-form .form-control {
  border: 1px solid rgba(112,112,112,.5); border-radius: calc(5 * var(--u));
  font-weight: 300; letter-spacing: .1em; color: var(--el-grey); background: transparent;
}
.el-form .form-control::placeholder { color: var(--el-grey); opacity: 1; }
.el-form .form-control:focus {
  border-color: var(--el-green); box-shadow: 0 0 0 .15rem rgba(188,192,130,.35); background: transparent;
}
.el-form .btn-send {
  background: var(--el-green); color: var(--el-black); border: 0; border-radius: 999px;
  font-weight: 500; letter-spacing: .15em; text-transform: uppercase; width: 100%;
  transition: background .2s ease, color .2s ease;
}
.el-form .btn-send:hover { background: var(--el-black); color: var(--el-green); }
.el-form .form-check-input { border-radius: calc(2 * var(--u)); border-color: rgba(112,112,112,.5); margin-top: .15rem; }
.el-form .form-check-input:checked { background-color: var(--el-green); border-color: var(--el-green); }
.el-form .privacy-note { color: var(--el-grey); }
.el-form .privacy-note a { color: var(--el-link); text-decoration: underline; }
.el-form .form-error { color: var(--el-red); }
.el-form .form-label-x { font-weight: 300; letter-spacing: .1em; color: var(--el-grey); display: block; }

@media (min-width: 1200px) {
  .el-form { width: calc(484 * var(--u)); margin-inline: auto; }
  .el-form .form-control { height: calc(33 * var(--u)); font-size: calc(11.29 * var(--u)); padding: 0 calc(10 * var(--u)); }
  .el-form textarea.form-control { height: calc(96 * var(--u)); padding-top: calc(8 * var(--u)); }
  .el-form .btn-send { height: calc(24 * var(--u)); font-size: calc(11.29 * var(--u)); padding: 0; }
  .el-form .form-label-x { font-size: calc(11.29 * var(--u)); }
  .el-form .privacy-note { font-size: calc(8 * var(--u)); letter-spacing: .1em; }
  .el-form .form-check-label { font-size: calc(11.29 * var(--u)); font-weight: 300; letter-spacing: .1em; }
  .el-form .form-check-input { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
  .el-form .mb-x { margin-bottom: calc(11 * var(--u)); }
}
@media (max-width: 1199.98px) {
  .el-form { max-width: 520px; margin-inline: auto; }
  .el-form .form-control { font-size: .85rem; padding: .6rem .8rem; border-radius: 5px; }
  .el-form .form-check-input { border-radius: 2px; }
  .el-form .btn-send { padding: .75rem; font-size: .8rem; }
  .el-form .form-label-x { font-size: .7rem; }
  .el-form .privacy-note { font-size: .65rem; }
  .el-form .form-check-label { font-size: .75rem; font-weight: 300; }
  .el-form .mb-x { margin-bottom: .6rem; }
}

/* ==========================================================================
   8. Micro-interazioni
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--el-green); outline-offset: 2px;
}