/* =========================
   Studio Brevetti Cerino
   style.css – mobile-first (smooth, fixed mobile zoom)
   ========================= */

/* ===== PALETTE ===== */
:root{
  --bg:#003366;
  --bg-overlay:rgba(0,0,0,.30);
  --white:#FFFFFF;
  --brand:#007bff;
  --brand-2:#0a58ca;
  --link:#7fe7ff;
  --link-hover:#bff3ff;
  --wa:#25D366;
  --wa-hover:#7af0a4;
  --radius:12px;
}

/* ===== BASE (mobile-first) ===== */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-size:15px;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }

body{
  font-family:'Segoe UI', system-ui, -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  color:var(--white);
  line-height:1.55;
  min-height:100dvh;                 /* migliore su mobile moderni */
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow-x:hidden;                  /* blocca scorrimento laterale/auto-zoom */
  background:
    linear-gradient(var(--bg-overlay),var(--bg-overlay)),
    url("https://www.transparenttextures.com/patterns/cubes.png") repeat,
    var(--bg);
}

img,svg,video{ max-width:100%; height:auto; display:block; }
a{ overflow-wrap:anywhere; word-break:break-word; }
.container{ width:100%; max-width:1100px; margin:0 auto; padding:0 14px; }

/* ===== HEADER ===== */
header{
  position:relative; z-index:20;
  background:rgba(0,0,0,.05);
  backdrop-filter:blur(2px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
@media (min-width:900px){
  header{ padding-top:10px; }
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 12px;
}

/* BRAND */
.brand-wrap{ display:flex; align-items:center; gap:10px; color:var(--white); text-decoration:none; }
.brand-text{ font-weight:700; letter-spacing:.2px; white-space:nowrap; font-size:15px; line-height:1; }
@media (min-width:821px){ .brand-text{ font-size:17px; } }

/* ===== NAV + HAMBURGER ===== */
.nav-toggle{ display:none; }
.hamburger{ display:block; cursor:pointer; width:38px; height:30px; position:relative; z-index:30; }
.hamburger span{
  position:absolute; left:0; right:0; height:3px; background:#fff; border-radius:2px;
  transition: transform .35s ease, opacity .25s ease; transform-origin:center;
}
.hamburger span:nth-child(1){ top:4px }
.hamburger span:nth-child(2){ top:12px }
.hamburger span:nth-child(3){ top:20px }

/* NAV MOBILE (smooth) */
@media (max-width:820px){
  .header-inner{ flex-wrap:wrap; padding:6px 10px; }

  .nav{
    position:static; width:100%;
    display:flex; flex-direction:column; gap:10px;

    background:rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.15);
    border-radius:10px;
    backdrop-filter:blur(3px);

    overflow:hidden;
    max-height:0;
    opacity:0;
    transform:translateY(-8px);
    padding:0 12px;
    margin-top:0;

    will-change:max-height,opacity,transform,padding,margin-top;
    transition:
      max-height .6s cubic-bezier(.22,.61,.36,1),
      opacity    .4s ease,
      transform  .6s cubic-bezier(.22,.61,.36,1),
      padding    .35s ease,
      margin-top .25s ease;
  }

  .nav-toggle:checked ~ .hamburger + .nav{
    max-height:420px; opacity:1; transform:translateY(0);
    padding:10px 12px; margin-top:6px;
  }

  .nav a{
    color:var(--white); text-decoration:none; opacity:.95; font-weight:600; white-space:nowrap; padding:6px 4px;
    transform:translateY(6px); opacity:0;
    transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
  }
  .nav a:hover{ opacity:1; text-decoration:underline; }

  .nav-toggle:checked ~ .hamburger + .nav a{ transform:translateY(0); opacity:1; }
  .nav-toggle:checked ~ .hamburger + .nav a:nth-child(1){ transition-delay:.06s; }
  .nav-toggle:checked ~ .hamburger + .nav a:nth-child(2){ transition-delay:.12s; }
  .nav-toggle:checked ~ .hamburger + .nav a:nth-child(3){ transition-delay:.18s; }
  .nav-toggle:checked ~ .hamburger + .nav a:nth-child(4){ transition-delay:.24s; }
  .nav-toggle:checked ~ .hamburger + .nav a:nth-child(5){ transition-delay:.30s; }
  .nav-toggle:checked ~ .hamburger + .nav a:nth-child(6){ transition-delay:.36s; }
  .nav-toggle:checked ~ .hamburger + .nav a:nth-child(7){ transition-delay:.42s; }

  /* hamburger -> X */
  #nav-toggle:checked + .hamburger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  #nav-toggle:checked + .hamburger span:nth-child(2){ opacity:0; }
  #nav-toggle:checked + .hamburger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
}

/* NAV DESKTOP */
@media (min-width:821px){
  .hamburger{ display:none; }
  .nav{
    position:static; display:flex; flex-direction:row; gap:18px;
    background:transparent; border:0; padding:0; backdrop-filter:none;
  }
  .nav a{ color:var(--white); text-decoration:none; opacity:.95; font-weight:600; }
  .nav a:hover{ opacity:1; text-decoration:underline; }
  .header-inner{ padding:18px 22px 12px; }
}

/* ===== MAIN & HERO ===== */
@media (max-width:820px){
  main{
    --hero-shift: 6vh;                /* meno spazio alto -> niente “zoom” percepito */
    padding:12px 0;
    padding-top:var(--hero-shift);
    transition:padding-top .6s cubic-bezier(.22,.61,.36,1);
    display:grid; place-items:start;
  }
  header:has(#nav-toggle:checked) + main{ --hero-shift: 2vh; }
}
@media (min-width:821px){
  main{ display:grid; place-items:center; padding:12px 0; }
}

.hero{
  text-align:center; width:100%; max-width:820px; padding:14px 12px 18px;
}

/* Logo hero su mobile leggermente più contenuto */
@media (max-width:560px){
  .logo-hero{ display:block !important; height:60px !important; width:auto; margin:6px auto 4px; }
}
@media (min-width:561px) and (max-width:820px){
  .logo-hero{ display:block !important; height:72px !important; margin:6px auto 4px; }
}

/* Tipografia */
.hero h1{
  font-size:clamp(1.35rem, 5.2vw, 1.85rem);
  margin:2px 0 6px;
  text-shadow:1px 1px 2px rgba(0,0,0,.45);
  letter-spacing:.2px;
}
.hero p{
  max-width:720px; margin:0 auto 8px;
  font-size:clamp(.9rem, 3.2vw, 1rem);
  text-shadow:1px 1px 2px rgba(0,0,0,.35);
}

/* ===== CONTATTI INLINE ===== */
.contacts-inline{ margin:6px auto 10px; }
.contacts-inline .row{ display:flex; justify-content:center; align-items:center; gap:6px; flex-wrap:wrap; }
.contacts-inline .dot{ opacity:.6; }
.contacts-inline a,
.contacts-inline a:link,
.contacts-inline a:visited{ color:var(--link); text-decoration:underline; font-weight:600; }
.contacts-inline a:hover{ color:var(--link-hover); }
.contacts-inline a[href^="https://wa.me"]{ color:var(--wa); }
.contacts-inline a[href^="https://wa.me"]:hover{ color:var(--wa-hover); }

/* ===== CTA ===== */
.cta-wrap{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-block; width:100%; max-width:440px;
  padding:10px 12px;
  border-radius:10px; text-decoration:none; font-weight:700; font-size:.96rem;
  box-shadow:0 6px 14px rgba(0,0,0,.2);
  transition:transform .05s ease-in-out, filter .15s ease;
}
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--brand); color:var(--white); }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-secondary{ background:var(--brand-2); color:var(--white); }
.btn-secondary:hover{ filter:brightness(1.06); }

/* ===== FOOTER ===== */
footer{
  color:#e8f2ff; text-align:center;
  padding:14px 0 16px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.9rem;
}
.footer-wrap{ display:grid; gap:8px; padding:0 12px; }
.legal{ opacity:.95; }
.legal-list{
  list-style:none; padding:0; margin:0 0 4px;
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
}
.legal-list li{
  white-space:normal;          /* ✅ consenti l’andata a capo (fix mobile zoom) */
  overflow-wrap:anywhere;      /* ✅ spezza segmenti molto lunghi */
  word-break:normal;
}
.legal-list li::after{ content:"·"; margin:0 6px; opacity:.6; }
.legal-list li:last-child::after{ content:""; }
.copy{ opacity:.85; font-size:.84rem; }
.footer-contacts a,
.footer-contacts a:link,
.footer-contacts a:visited{ color:#bfe2ff; text-decoration:underline; font-weight:600; }
.footer-contacts a[href^="https://wa.me"]{ color: var(--wa) !important; }
.footer-contacts a[href^="https://wa.me"]:hover{ color: var(--wa-hover) !important; }

/* ===== MICRO (≤ 400px) ===== */
@media (max-width:400px){
  html{ font-size:14px; }                 /* riduce leggermente la scala generale */
  .btn{ padding:9px 10px; font-size:.94rem; }
}

/* Piccolissimi (≤ 360px): lascia andare a capo anche il brand */
@media (max-width:360px){
  .brand-text{ white-space:normal; }
}

/* ===== DESKTOP ENHANCEMENTS (≥ 900px) ===== */
@media (min-width:900px){
  .container{ padding:0 20px; }
  .hero{ padding:24px 18px 28px; }
  .hero h1{ font-size:clamp(2rem, 4.8vw, 3.2rem); margin:6px 0 10px; }
  .hero p{ font-size:clamp(1rem, 1.6vw, 1.18rem); margin:0 auto 14px; }
  .btn{ width:auto; padding:14px 18px; border-radius:var(--radius); font-size:1rem; box-shadow:0 10px 22px rgba(0,0,0,.25); }
}

/* ===== Motion accessibility ===== */
@media (prefers-reduced-motion: reduce){
  .nav, .nav a, .hamburger span, main{ transition:none !important; }
  .logo-lit, .logo-hero{ animation:none !important; }
}

/* Desktop: linea header un filo più bassa */
@media (min-width:900px){
  header{ padding-bottom:8px !important; }
  .header-inner{ height:64px; align-items:center; }
}

/* Mobile: linea header più vicina al contenuto */
@media (max-width:820px){
  header{ padding-bottom:0 !important; }
  .header-inner{ padding-top:14px; padding-bottom:1px; }
  header .logo-lit{ height:46px !important; }
  .nav-toggle:checked ~ .hamburger + .nav{ margin-top:4px; }
}

/* ===== Pagine interne utili (lasciate come nel tuo file) ===== */
.hero-sub{ max-width:860px; padding:22px 16px 6px; }
.hero-sub h1{ font-size:clamp(1.6rem,4.6vw,2.4rem); margin:8px 0 6px; }
.hero-sub p{ font-size:clamp(1rem,2vw,1.12rem); opacity:.95; }

.section{ padding:16px 0; }

.grid-2{ display:grid; gap:16px; align-items:start; }
@media (min-width:900px){ .grid-2{ grid-template-columns:320px 1fr; gap:24px; } }

.profile-photo{
  width:100%; max-width:320px; border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.14);
  object-fit:cover;
}

.card{
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}

.badges{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 2px; }
.badge{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  padding:6px 10px; border-radius:999px;
  font-weight:600; font-size:.92rem;
}

.ol-steps{ counter-reset:step; list-style:none; padding:0; margin:8px 0 0; }
.ol-steps li{ position:relative; padding-left:42px; margin:10px 0; }
.ol-steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:2px;
  width:26px; height:26px; border-radius:50%;
  background:var(--brand); color:#fff;
  display:grid; place-items:center; font-weight:700;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}