/* shared.css — TechCo (EXACT Lovable colors + utilities) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --background: #ffffff;
  --foreground: #0f172a;
  --surface: #f8fafc;
  --card: #ffffff;
  --popover: #ffffff;
  --primary: #0f172a;
  --primary-foreground: #ffffff;
  --secondary: #f1f5f9;
  --secondary-foreground: #0f172a;
  --muted: #f1f5f9;
  --muted-foreground: #475569;
  --accent: #f1f5f9;
  --accent-foreground: #0f172a;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #2563eb;
  --brand: #1e3a8a;
  --brand-glow: #2563eb;
  --radius: 0px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--background); color: var(--foreground);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; }
h1,h2,h3,h4,h5,h6 { letter-spacing: -0.02em; }

/* Container padding utility */
.container-px { padding-inline: 1.25rem; }
@media (min-width: 768px) { .container-px { padding-inline: 2rem; } }
@media (min-width: 1280px) { .container-px { padding-inline: 4rem; } }

/* Grid background pattern */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* btn-solid = bg-foreground text-background */
.btn-solid {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--foreground); color: var(--background);
  padding: 14px 24px; font-size: 13px; font-weight: 500;
  font-family: inherit; border: 0;
  transition: all .15s; cursor: pointer;
}
.btn-solid:hover { opacity: .85; }

/* Nav dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute; left: 0; top: 100%; padding-top: 8px;
  opacity: 0; visibility: hidden; transition: all .15s;
  pointer-events: none;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible;
  pointer-events: auto;
}
.nav-dropdown:hover .chevron-down { transform: rotate(180deg); }
.nav-dropdown-menu a:hover { background: var(--surface); color: var(--foreground); }

/* Reveal: animazione CSS sempre attiva (funziona anche senza JS) */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  animation: revealUp .6s ease forwards;
}
/* Observer upgrade: fine sintonizzazione scroll via JS */
.reveal.in,
.reveal.visible { }

/* Team card hover */
.team-link:hover { border-color: var(--foreground); }
.team-link:hover .social { background: var(--foreground); border-color: var(--foreground); }
.team-link:hover .social svg { color: var(--background); }

/* Footer base */
footer { background: var(--background); }
footer a:hover { color: var(--foreground) !important; }
footer a { transition: color .15s; }

/* Mobile overlay: transitions + hamburger */
.mobile-menu-btn { z-index: 50; position: relative; }
.mobile-menu-btn span { display: block; width: 22px; height: 2px; background: var(--foreground); margin-bottom: 5px; transition: all .25s cubic-bezier(.4,0,.2,1); border-radius: 1px; }
.mobile-menu-btn span:last-child { margin-bottom: 0; }
.mobile-menu-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.mobile-menu-btn.open span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.mobile-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1), visibility .35s;
}
.mobile-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
/* Links inside overlay: staggered fade-in */
.mobile-overlay a,
.mobile-overlay p,
.mobile-overlay hr {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.mobile-overlay.open a,
.mobile-overlay.open p,
.mobile-overlay.open hr {
  opacity: 1;
  transform: translateY(0);
}
.mobile-overlay.open a:nth-child(1) { transition-delay: .04s; }
.mobile-overlay.open a:nth-child(2) { transition-delay: .08s; }
.mobile-overlay.open a:nth-child(3) { transition-delay: .12s; }
.mobile-overlay.open a:nth-child(4) { transition-delay: .16s; }
.mobile-overlay.open a:nth-child(5) { transition-delay: .20s; }
.mobile-overlay.open hr { transition-delay: .24s; }
.mobile-overlay.open p { transition-delay: .28s; }
.mobile-overlay.open a:nth-child(n+7) { transition-delay: .32s; }
.mobile-overlay.open a:nth-child(8) { transition-delay: .36s; }
.mobile-overlay.open a:nth-child(9) { transition-delay: .40s; }
.mobile-overlay.open a:nth-child(10) { transition-delay: .44s; }
.mobile-overlay.open a:nth-child(11) { transition-delay: .48s; }

#mobile-overlay { z-index: 49; }

@media (max-width: 900px) {
  .mobile-menu-btn { display: block !important; }
}
@media (min-width: 901px) {
  .mobile-menu-btn { display: none !important; }
}

/* Override inline display:none — we use class-based visibility */
.mobile-overlay[style*="display:none"] { opacity: 0 !important; visibility: hidden !important; }

/* ── Mobile Responsive (overrides inline styles) ────────── */
@media (max-width: 767px) {
  /* Nav */
  [style*="padding:0 48px;display:flex"] { padding: 0 16px !important; height: 56px !important; }
  [style*="height:64px"] { height: 56px !important; }

  /* Hero sections - reduce padding */
  [style*="padding:80px 48px 112px"] { padding: 48px 20px 64px !important; }
  [style*="padding:80px 48px 80px"] { padding: 48px 20px 48px !important; }
  [style*="padding:80px 48px 64px"] { padding: 48px 20px 40px !important; }
  [style*="padding:80px 48px"] { padding: 48px 20px !important; }
  [style*="padding:96px 48px"] { padding: 48px 20px !important; }
  [style*="padding:64px 48px 0"] { padding: 40px 20px 0 !important; }
  [style*="padding:48px 48px 0"] { padding: 40px 20px 0 !important; }
  [style*="padding:56px 48px 40px"] { padding: 32px 20px 24px !important; }
  [style*="padding:20px 48px 28px"] { padding: 16px 20px 24px !important; }
  [style*="margin:0 48px"] { margin: 0 20px !important; }
  /* Social icons round: reduce size on mobile */
  [style*="border-radius:50%;display:flex;align-items:center;justify-content:center;transition"] { width: 32px !important; height: 32px !important; }
  [style*="padding:0 48px 96px"] { padding: 0 20px 48px !important; }
  [style*="padding:0 48px 80px"] { padding: 0 20px 48px !important; }
  [style*="padding:40px 56px"] { padding: 24px 20px !important; }
  [style*="padding:40px 64px"] { padding: 32px 24px !important; }
  [style*="padding:36px 32px"] { padding: 24px 20px !important; }
  [style*="padding:24px 32px"] { padding: 20px !important; }
  [style*="padding:32px"] { padding: 20px !important; }
  [style*="padding:64px 0"] { padding: 40px 0 !important; }
  [style*="padding-bottom:64px"] { padding-bottom: 32px !important; }
  [style*="padding:24px 0"] { padding: 16px 0 !important; }
  [style*="padding:80px 24px"] { padding: 48px 20px !important; }

  /* Grids: multi-col → 1 col */
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:repeat(3,1fr);gap:24px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(3,1fr);border:1px solid var(--border)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:5fr 7fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1.4fr"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [style*="grid-template-columns:3fr 2fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:2fr 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 24px !important; }
  [style*="grid-template-columns:1.8fr 1fr 1fr 1.3fr"] { grid-template-columns: 1fr !important; gap: 28px !important; }
  [style*="grid-template-columns:1fr auto"] { grid-template-columns: 1fr !important; text-align: center !important; }
  [style*="grid-template-columns:1fr 1fr;gap:12px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr;gap:20px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr;gap:24px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:5fr 7fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(2,1fr);gap:12px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:auto 1fr auto"] { grid-template-columns: 1fr !important; text-align: center !important; }
  .hero-section [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Font sizes - clamp reductions */
  [style*="font-size:clamp(48px,7.5vw,96px)"] { font-size: clamp(36px, 12vw, 48px) !important; }
  [style*="font-size:clamp(48px,7vw,80px)"] { font-size: clamp(36px, 12vw, 52px) !important; line-height: 1.05 !important; }
  [style*="font-size:clamp(36px,5vw,60px)"] { font-size: clamp(28px, 8vw, 36px) !important; }
  [style*="font-size:clamp(32px,5vw,60px)"] { font-size: clamp(28px, 8vw, 36px) !important; }
  [style*="font-size:clamp(32px,4vw,52px)"] { font-size: clamp(28px, 8vw, 36px) !important; }
  [style*="font-size:clamp(32px,3.5vw,42px)"] { font-size: clamp(24px, 8vw, 32px) !important; }
  [style*="font-size:clamp(30px,3.5vw,42px)"] { font-size: clamp(24px, 8vw, 32px) !important; }
  [style*="font-size:clamp(28px,4vw,48px)"] { font-size: clamp(24px, 7vw, 32px) !important; }
  [style*="font-size:clamp(28px,3.5vw,48px)"] { font-size: clamp(24px, 7vw, 32px) !important; }
  [style*="font-size:clamp(24px,3vw,40px)"] { font-size: clamp(20px, 6vw, 28px) !important; }
  [style*="font-size:clamp(24px,2.5vw,32px)"] { font-size: clamp(18px, 5vw, 24px) !important; }
  [style*="font-size:clamp(44px,6.5vw,72px)"] { font-size: clamp(36px, 12vw, 48px) !important; }
  [style*="font-size:clamp(42px,6vw,72px)"] { font-size: clamp(36px, 12vw, 48px) !important; }
  [style*="font-size:clamp(48px,6vw,80px)"] { font-size: clamp(32px, 12vw, 48px) !important; }

  /* max-width constraints */
  [style*="max-width:900px"] { max-width: 100% !important; }
  [style*="max-width:640px"] { max-width: 100% !important; }
  [style*="max-width:600px"] { max-width: 100% !important; }
  [style*="max-width:520px"] { max-width: 100% !important; }
  [style*="max-width:480px"] { max-width: 100% !important; }
  [style*="max-width:400px"] { max-width: 100% !important; }
  [style*="max-width:340px"] { max-width: 100% !important; }
  [style*="max-width:320px"] { max-width: 100% !important; }

  /* Body text size */
  [style*="font-size:18px"] { font-size: 16px !important; }
  [style*="font-size:17px"] { font-size: 15px !important; }

  /* Gap reductions */
  [style*="gap:80px"] { gap: 32px !important; }
  [style*="gap:60px"] { gap: 32px !important; }
  [style*="gap:48px"] { gap: 24px !important; }
  [style*="gap:40px"] { gap: 24px !important; }
  [style*="gap:32px"] { gap: 20px !important; }
  [style*="gap:24px"] { gap: 16px !important; }
  [style*="gap:20px"] { gap: 12px !important; }

  /* Margins */
  [style*="margin-top:96px"] { margin-top: 48px !important; }
  [style*="margin-top:64px"] { margin-top: 32px !important; }
  [style*="margin-top:40px"] { margin-top: 24px !important; }
  [style*="margin-top:36px"] { margin-top: 24px !important; }
  [style*="margin-top:32px"] { margin-top: 20px !important; }
  [style*="margin-top:28px"] { margin-top: 20px !important; }
  [style*="margin-top:24px"] { margin-top: 16px !important; }
  [style*="margin-top:16px"] { margin-top: 12px !important; }
  [style*="margin-top:12px"] { margin-top: 8px !important; }
  [style*="margin-bottom:64px"] { margin-bottom: 32px !important; }
  [style*="margin-bottom:48px"] { margin-bottom: 24px !important; }
  [style*="margin-bottom:36px"] { margin-bottom: 24px !important; }
  [style*="margin-bottom:28px"] { margin-bottom: 20px !important; }
  [style*="margin-bottom:24px"] { margin-bottom: 16px !important; }
  [style*="margin-bottom:20px"] { margin-bottom: 12px !important; }
  [style*="margin-bottom:16px"] { margin-bottom: 12px !important; }
  [style*="margin:0 auto 32px"] { margin: 0 auto 24px !important; }

  /* Buttons full width */
  .btn-solid { width: 100% !important; justify-content: center !important; }
  [style*="display:flex;flex-wrap:wrap;gap:12px;margin-top:40px"] { flex-direction: column !important; }
  [style*="display:inline-flex;align-items:center;gap:8px;border:1px solid var(--foreground)"] { width: 100% !important; justify-content: center !important; }
  [style*="display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border)"] { padding: 4px 8px !important; font-size: 10px !important; }

  /* Timeline adjustments */
  [style*="grid-template-columns:1fr 80px 1fr"] { grid-template-columns: 1fr !important; }

  /* Product cards */
  [style*="grid-template-columns:1.4fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Footer adjustments: bottom bar collapse */
  [style*="display:flex;justify-content:space-between;align-items:center;font-size:12px"] { flex-direction: column !important; gap: 8px !important; text-align: center !important; }
  /* Footer bottom bar with flex-wrap pattern */
  [style*="justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px"] { flex-direction: column !important; gap: 8px !important; text-align: center !important; }
  /* Footer bottom bar with gap:24px — collapse links row */
  footer [style*="gap:24px"] { flex-direction: column !important; gap: 6px !important; text-align: center !important; }

  /* Newsletter input/button */
  [type="email"] { font-size: 13px !important; padding: 10px !important; }

  /* Contact form */
  [style*="grid-template-columns:1fr 1fr;gap:24px"] { grid-template-columns: 1fr !important; }

  /* Hero background grids */
  .hero-bg-grid { background-size: 32px 32px !important; }

  /* Ensure buttons stack */
  .hero-actions { flex-direction: column !important; }
}
/* ── Mobile: full-width sections (override inline max-width) ── */
@media (max-width: 767px) {
  /* Kill any max-width constraint on inner wrappers */
  div[style*="max-width:1280px;margin:0 auto"],
  section[style*="max-width:1280px;margin:0 auto"] {
    max-width: 100% !important;
    margin: 0 !important;
  }
  /* Ensure borders bleed to edges: remove inline padding from container divs */
  div[style*="max-width:1280px;margin:0 auto"],
  [style*="max-width:1280px;margin:0 auto;padding:80px 48px"],
  [style*="max-width:1280px;margin:0 auto;padding:96px 48px"],
  [style*="max-width:1280px;margin:0 auto;padding:0 48px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Container-px wrapper: zero padding su mobile */
  div.container-px[style*="max-width:1280px;margin:0 auto"] {
    padding: 0 !important;
  }
  /* Section rows inside: border-bottom full bleed (100vw trick) */
  section[style*="border-bottom:1px solid var(--border)"] {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Title sections in cosa-facciamo: separator below eyebrow+title on mobile */
  section[style*="border-bottom:1px solid var(--border)"] > .reveal:first-child {
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid var(--border) !important;
  }
  /* Products section separator */
  #verticali > .reveal:first-child {
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid var(--border) !important;
  }
  /* Sibling section full-bleed borders */
  section[style*="background:var(--surface);border-top"] {
    width: 100% !important;
  }
  /* Footer full-width override */
  footer div[style*="max-width:1280px;margin:0 auto"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  /* Timeline: 1024px container full-width */
  section[style*="max-width:1024px;margin:0 auto;padding:80px 48px"] {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Timeline vertical line: move to screen edge on mobile */
  [style*="position:absolute;left:24px;top:0;bottom:0;width:1px"] {
    left: 20px !important;
  }
  /* Timeline dots: reposition inline with line */
  [style*="position:absolute;left:-33px;top:4px;width:16px;height:16px"] {
    left: 12px !important;
    top: 4px !important;
    width: 14px !important;
    height: 14px !important;
  }
  /* Timeline item padding: reduce left padding for mobile */
  [style*="padding:0 0 0 64px;position:relative"] {
    padding-left: 44px !important;
  }
  /* Cosa-facciamo products: grid 1fr 1fr => 1 col */
  [style*="grid-template-columns:1fr 1fr;gap:24px;margin-top:48px"] {
    grid-template-columns: 1fr !important;
  }
}