/* =========================
   THEMES (CSS variables)
   ========================= */
:root{
  --pad: clamp(16px, 3vw, 48px);
  --maxContent: 920px;
  --line_thickness: 1px;
  --line_transparency: 92%;
  
  /* Default theme = Neutral Pro */
  --bg: #0B0D10;
  --surface1: #12161C;
  --surface2: #171D25;
  --text: #F2F5F8;
  --muted: #B6C0CC;
  --border: #243041;
  --accent: #FF8A00;
  --accentHover: #FFA033;
  --focus: #5AA7FF;
  --shadow: 0 12px 28px rgba(0,0,0,0.35);

}

html[data-theme="inky"]{
  --bg: #070A12;
  --surface1: #0D1220;
  --surface2: #121A2D;
  --text: #EAF0FF;
  --muted: #A9B5D3;
  --border: #203056;
  --accent: #FF8A00;
  --accentHover: #FFA033;
  --focus: #6EA8FF;
  --shadow: 0 14px 34px rgba(0,0,0,0.42);
}

html[data-theme="warm"]{
  --bg: #0E0C0A;
  --surface1: #161310;
  --surface2: #1D1915;
  --text: #F6F1EC;
  --muted: #C8BFB6;
  --border: #2E2924;
  --accent: #FF8A00;
  --accentHover: #FFA033;
  --focus: #FFD08A;
  --shadow: 0 14px 34px rgba(0,0,0,0.42);
}

/* =========================
   BASE / SAFETY
   ========================= */
*, *::before, *::after { box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
  background-color: var(--bg);
  /* Background texture: Topographic contours */
  background-image:
    radial-gradient(1200px 900px at 18% 68%, color-mix(in srgb, var(--text), transparent 89%), transparent 100%),
    repeating-radial-gradient(circle at 18% 68%,
      color-mix(in srgb, var(--text), transparent var(--line_transparency)) 0,
      color-mix(in srgb, var(--text), transparent var(--line_transparency)) var(--line_thickness),
      transparent var(--line_thickness),
      transparent 14px),
    repeating-radial-gradient(circle at 78% 34%,
      color-mix(in srgb, var(--text), transparent var(--line_transparency)) 0,
      color-mix(in srgb, var(--text), transparent var(--line_transparency)) var(--line_thickness),
      transparent var(--line_thickness),
      transparent 18px);

  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  /* Allow vertical scroll */
  overflow-y: auto;

  /* Hide scrollbars but allow scroll */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }

a{
  color: var(--accent);
  text-decoration: none;
}
a:hover{ color: var(--accentHover); text-decoration: underline; }

.srOnly{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================
   LAYOUT
   ========================= */
.wrap{
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(240px, 26vw) 1fr;
  align-items: start;
  align-content: start;

  /* Prevent accidental horizontal clipping/overflow */
  overflow-x: clip;
}

/* Right column wrapper: stack nav + divider + content at the very top */
.right{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

/* Portrait: always top-left */
.left{
  grid-column: 1;
  grid-row: 1;
  /* padding: calc(var(--pad) / 2); */
  /* padding: var(--pad); */
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.left img{
  width: 100%;
  max-width: 360px;
  height: auto;
  max-height: calc(100vh - (2 * var(--pad)));
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.35));
}

/* Nav wrapper (top-right) */
.navWrap{
  grid-area: nav;
  padding: var(--pad) var(--pad) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* Navbar (invisible buttons, white text, active orange) */
.nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px 18px;
}

.nav button{
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  position: relative;
  display: inline-flex;
  justify-content: center;
  padding: 6px 10px 10px;
  font-weight: 650;
  font-size: clamp(16px, 1.1vw, 18px);
  letter-spacing: 0.6px;
  opacity: 0.92;
  transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
  line-height: 1.2;
}
.nav button:hover{ opacity: 1; transform: translateY(-2px); }
.nav button:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--focus), transparent 45%);
  outline-offset: 3px;
  border-radius: 10px;
}
.nav button.active{
  color: var(--accent);
  opacity: 1;
}

.nav button::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accentHover), transparent);
  opacity: 0.95;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms ease;
}
.nav button.active::after{
  transform: scaleX(1);
}

/* Theme switcher (3 dots) */
.themeSwitch{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.swatch{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 20%);
  background: var(--surface2);
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.swatch.isOn{
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus), transparent 70%);
  border-color: color-mix(in srgb, var(--focus), var(--border) 50%);
}
.swatch[data-theme-set="neutral"]{ background: #171D25; }
.swatch[data-theme-set="inky"]{ background: #121A2D; }
.swatch[data-theme-set="warm"]{ background: #1D1915; }

/* Divider: no horizontal margins that can overflow */
.divider{
  align-self: center;
  width: min(100%, var(--maxContent));
  height: 1px;
  background: color-mix(in srgb, var(--border), transparent 35%);
  justify-self: center;
  margin-top: 12px;
}

/* Content panel */
.contenuto{
  align-self: center;
  width: 98%;
  max-width: min(100%, calc(var(--maxContent) + (2 * var(--pad))));
  justify-self: center;

  margin-top: 14px;
  margin-bottom: var(--pad);

  padding: clamp(14px, 2vw, 22px);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--surface1), var(--surface2));
  /* border: 1px solid color-mix(in srgb, var(--border), transparent 25%); */
  box-shadow: var(--shadow);
}

/* Sections */
.section{
  display: none;
  width: 100%;
  max-width: var(--maxContent);
  margin: 0 auto;
}
.section.active{ display: block; }

.section h2{
  margin: 0 0 13px;
  font-size: clamp(20px, 1.2vw, 28px);
  font-weight: 600;
  color: color-mix(in srgb, var(--text), var(--accent) 18%);
  line-height: 1.15;
}
.section h3{
  margin: 18px 0 6px;
  font-size: clamp(16px, 1vw, 20px);
  font-weight: 650;
  color: var(--text);
}
.section p{
  margin: 0 0 1em 1em;
  color: var(--muted);
  line-height: 1.05;
  font-size: clamp(15px, 1vw, 18px);
}

.section p a{
  text-decoration: underline;
  font-weight: 700;
}

.vertical_space_small{
  height: 1px;
}

.vertical_space_medium{
  height: 5px;
}

.vertical_space_large{
  height: 10px;
}

.vertical_spacer{
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--surface1), var(--surface2), var(--surface1));
  margin-bottom: 10px;
}

.mt{ margin-top: 18px; }
.mtSm{ margin-top: 14px; }

.emph{
  color: var(--accent);
  font-weight: 700;
}

/* Review metrics (grid) */
.metricGridWrap{
  width: 500px;
  border-radius: 16px;
  /* border: 1px solid color-mix(in srgb, var(--border), transparent 20%); */
  /* background: var(--surface2); */
  /* padding: 12px; */
  margin: 10px 5px 16px;

  /* Keep the metrics on the left and narrower, without breakpoints */
  /* max-width: 60%; */
  margin-right: auto;
}

.metricGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  align-items: stretch;
  /* align-items: last baseline; */
  /* background-color: var(--focus); */
}

.metricCard{
  /* height: 80px; */
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 35%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface1), transparent 25%),
    var(--surface2)
  );
  align-content: end;

}

.metricLabel{
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.2px;
  line-height: 1.2;
}

.metricValue{
  margin-top: 6px;
  color: var(--text);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2px;
}

/* Contact area */

.contactLine{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}
.sep{ color: color-mix(in srgb, var(--muted), transparent 15%); }

.whatsLink{
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  transform: translateZ(0);
}
.whatsLink:hover{
  box-shadow: 0 10px 22px rgba(0,0,0,0.32);
}

.contact-form-iframe {
  /* display: none; */
  width: 100%;
  border: none;
  padding: 0;
  margin: 0;
  /* border-radius: 18px; */
}


/* Variant 9: Soft grain overlay for a more premium texture */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.04), transparent 55%),
    repeating-radial-gradient(circle at 10% 10%,
      rgba(255,255,255,0.030) 0,
      rgba(255,255,255,0.030) 1px,
      transparent 1px,
      transparent 3px);
  opacity: 0.0;
  mix-blend-mode: overlay;
}

/* =========================
   DESKTOP
   ========================= */
@media (min-width: 901px){
  .wrap{
    margin-right: 15px;
  }

  .left{
    position: sticky; /* Sticky portrait only on desktop */
    top: 0;
    padding: var(--pad);
  }
  /* .contact-form-iframe {
    display: inline-block;
  } */
  
  p iframe {
    width: 100%;
    height: 1850px;      /* increase if the form is taller */
    border: 0;
        border: 1px solid color-mix(in srgb, var(--border), transparent 25%);
    border-radius: 14px;
    display: block;
    overflow: hidden;    /* hide iframe scrollbars in the parent */
    box-sizing: border-box;
  }
/*   
  .contact-form-button {
    display: none;
  } */
}

/* =========================
    TABLET          keep image left, nav right stacked, content full width below
   ========================= */
  @media (max-width: 900px){
  .wrap{
    grid-template-columns: minmax(220px, 42vw) 1fr;
    grid-template-rows: auto auto auto;
    margin-left: 15px;
    margin-right: 15px;
  }

  /* Let the right wrapper dissolve so its children can become grid items */
  .right{ display: contents; }

  /* Stop sticky behavior on small screens */
  .left{ 
    position: static; 
    max-width: 170px;
    padding: 0;
  }

  .navWrap{
    grid-column: 2;
    grid-row: 1;
    padding: var(--pad) var(--pad) 0 0;
  }

  .divider{
    margin-top: 0px;
    visibility: hidden;
  }

  .contenuto{
    grid-column: 1 / -1;
    grid-row: 3;
    margin-left: var(--pad);
    margin-right: var(--pad);
  }

  .nav{
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 10px;
  }
  .nav button{
    width: fit-content;
    align-self: flex-end;
    text-align: right;
  }
/*   
  .contact-form-iframe {
    display: inline-block;
  } */

  p iframe {
    width: 100%;
    height: 1850px;      /* increase if the form is taller */
    border: 0;
    /* border-radius: 14px; */
    display: block;
    overflow: hidden;    /* hide iframe scrollbars in the parent */
    box-sizing: border-box;
  }
/* 
  .contact-form-button {
    display: none;
  } */
}

/* =========================
    MOBILE          picture height matches stacked nav
   ========================= */
@media (max-width: 520px){
  .wrap{
    grid-template-columns: minmax(170px, 40vw) 1fr;
    margin-left: 0px;
    margin-right: 0px;
  }
  
  .left{
    padding: 12px 10px 12px 12px;
    align-self: stretch;
  }
  .left img{
    height: 100%;
    max-height: none;
    max-width: none;
  }

  .navWrap{
    padding: 5px 0px 0 0;
  }

  .contenuto{
    margin-left: 2px;
    margin-right: 2px;
    padding: 10px;
  }

  /* quando lo schermo e' piccolo, restringo le metriche */
  .metricGridWrap{
    width: 300px;
      margin: 0;
  }

  /* .contact-form-button {
    display: inline-block;
  } */

  /* .contact-form-iframe {
    display: none;
  }  */
}