/* global.css */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root{
  --bg-dark: #16321f;
  --bg-mid:  #5f745a;
  --bg-light:#a8b89f;
  --text:    #0b0f0c;
  --white:   #ffffff;
  --radius:  14px;
  --shadow:  0 10px 30px rgba(0,0,0,.18);
  --container: 1100px;
  --font-sans: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body{
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg-light); /* evita il bianco sotto al footer */
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* When mobile nav is open, prevent page scroll */
body.nav-open{
  overflow: hidden;
  touch-action: none;
}

/* Ensure form controls use the same font everywhere */
button, input, select, textarea{
  font-family: inherit;
}

main{ flex: 1; }

h1, h2, h3{
  font-weight: 700;
  letter-spacing: .2px;
}

.container{
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
}

.site-header{
  background: var(--bg-dark);
  color: var(--white);
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-wrap: nowrap;
}

.brand{ display:flex; gap:10px; align-items:center; color:inherit; text-decoration:none; }
.brand__logo{ width:22px; height:22px; }

.site-nav{ display:flex; gap:16px; align-items:center; }
.site-nav a{ color: var(--white); text-decoration:none; font-size:14px; opacity:.95; }
.site-nav a:hover{ opacity:1; text-decoration: underline; }

.nav-toggle{ display:none; background:transparent; border:0; color:#fff; font-size:22px; }

.hero{
  background: var(--bg-mid);
  padding: 20px 0;
  text-align:center;
}

.hero h1{ margin:0 0 10px; color: #1c2c1e; }
.hero__text{ max-width: 1000px; margin: 0 auto 18px; color: rgba(255,255,255,.9); }

.btn{
  display:inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration:none;
  font-weight:600;
}
.btn-primary{ background:#fff; color:#123; }

.section{ padding: 26px 0 40px; }
.section--light{ background: var(--bg-light); }
.section__title{ text-align:center; margin: 0 0 16px; color:#2d3e2c; }
.section__subtitle{ text-align:center; margin: 22px 0 12px; color:#2d3e2c; }

.site-footer{
  background: var(--bg-dark);
  color:#fff;
  padding: 12px 0;
}

.footer__inner{
  display:flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 860px){
  .nav-toggle{ display:block; }
  .site-nav{
    display:none;
    position:fixed;
    top:56px; right:0; left:0;
    background: var(--bg-dark);
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    z-index: 1000;
  }
  .site-nav.is-open{ display:flex; }
}

/* Prevent accidental horizontal scroll on mobile */
html, body{ overflow-x: hidden; }

/* Form controls inherit font everywhere */
button, input, select, textarea{ font-family: inherit; }

[hidden] { display: none !important; }


/* ---------- MODAL (Privacy) ---------- */
.modal[hidden] { display: none !important; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
}
.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}
.modal__panel{
  position: relative;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 16px 16px 8px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.modal__close{
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 10px;
}
.modal__close:hover{ background: rgba(0,0,0,.06); }
.modal__body{ padding: 12px 16px; }
.modal__foot{
  padding: 12px 16px 16px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Modal links should follow theme (no blue default) */
.modal a{ color: inherit; text-decoration: underline; text-underline-offset:2px; }
.modal a:hover{ opacity:.9; }


/* Privacy inline links */
label.privacy a, .privacy a{ color: inherit; text-decoration: underline; text-underline-offset:2px; }



/* Simple list styling */
.clean-list{ margin:0; padding-left: 18px; }
.clean-list li{ margin: 8px 0; }

.privacy-content a{ color: inherit; text-decoration: underline; }