/* =========================================================
   Esamatic — Semantic Hub Styles
   Goal: leggibilità top-tier, gerarchie chiare, alto engagement.
   UX/SEO: tipografia fluida, ampia spaziatura, link chiari, focus visibili.
   Palette (derivata dal sito):
     --brand: #004AAD (blu Esamatic)
     --accent: #00AEEF (azzurro)
     --ink: #0F172A  (slate-900)
     --muted: #475569 (slate-600)
     --border: #E5E7EB
     --bg: #FFFFFF
     --bg-soft: #F8FAFC
     --success: #16A34A; --warning: #F59E0B; --danger: #DC2626
   Tipografia: sistema fluido + misure confortevoli per scanning.
   ========================================================= */

/* ---------- Reset UI "gentile" ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { text-underline-offset: .15em; }

/* ---------- Design tokens ---------- */
:root{
  /* Color */
  --brand: #004AAD;
  --brand-600: #0b3f91;
  --accent: #00AEEF;
  --accent-600: #008ec1;
  --ink: #0F172A;
  --ink-2: #1F2937;
  --muted: #475569;
  --border: #E5E7EB;
  --bg: #FFFFFF;
  --bg-soft: #F8FAFC;
  --shadow: 0 10px 30px rgba(15,23,42,.08);

  /* Typography (fluid) */
  --step--1: clamp(.9rem, .86rem + .18vw, 1rem);
  --step-0: clamp(1rem, .95rem + .25vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.12rem + .6vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.32rem + .9vw, 1.875rem);
  --step-3: clamp(1.875rem, 1.6rem + 1.5vw, 2.25rem);
  --step-4: clamp(2.25rem, 1.9rem + 2.1vw, 3rem);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(16px, 3vw, 28px);
  --radius: 14px;
  --radius-sm: 10px;
  --ring: 3px solid color-mix(in srgb, var(--brand) 30%, transparent);

  /* Spacing scale */
  --s-1: .375rem;  /* 6 */
  --s-2: .5rem;    /* 8 */
  --s-3: .75rem;   /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.25rem;  /* 20 */
  --s-6: 1.5rem;   /* 24 */
  --s-7: 2rem;     /* 32 */
  --s-8: 3rem;     /* 48 */
}

@media (prefers-reduced-motion: no-preference){
  :root{ --anim: 240ms cubic-bezier(.2,.7,.2,1); }
}

/* ---------- Base ---------- */
body{
  font: 400 var(--step-0)/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
}

/* leggibilità estesa per testi larghi */
main p{ max-width: 70ch; }

/* container */
.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Headings ---------- */
h1{ font-size: var(--step-4); line-height: 1.1; letter-spacing: -.015em; }
h2{ font-size: var(--step-2); line-height: 1.2; letter-spacing: -.01em; margin-top: var(--s-8); }
h3{ font-size: var(--step-1); line-height: 1.25; margin-top: var(--s-6); color: var(--ink-2); }

.subtitle{
  color: var(--muted);
  font-size: var(--step-1);
  margin-block: var(--s-4) var(--s-5);
}

/* ---------- Links ---------- */
a{
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand) 70%, transparent);
  transition: color var(--anim), text-decoration-color var(--anim);
}
a:hover{ color: var(--brand-600); text-decoration-color: currentColor; }
a.btn{ text-decoration: none; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 600;
  padding: .7em 1.1em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition: transform var(--anim), box-shadow var(--anim), background var(--anim), color var(--anim), border-color var(--anim);
  will-change: transform;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 90%, white) 0%, var(--brand) 100%);
  color: #fff;
  border-color: color-mix(in srgb, var(--brand) 70%, transparent);
}
.btn-primary:hover{ box-shadow: var(--shadow); }

.btn-secondary{
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, white) 0%, var(--accent) 100%);
  color: #06223a;
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.btn-outline{
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.btn-outline:hover{
  background: color-mix(in srgb, var(--brand) 10%, white);
}

/* ---------- Focus states (a11y) ---------- */
:where(a, button, .btn, summary):focus-visible{
  outline: var(--ring);
  outline-offset: 2px;
  border-radius: 10px;
}

/* ---------- Breadcrumb ---------- */
nav.breadcrumb{
  background: var(--bg-soft);
  border-block: 1px solid var(--border);
  font-size: var(--step--1);
}
nav.breadcrumb .trail{
  display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .5rem;
  padding-block: var(--s-3);
}
nav.breadcrumb a{ color: var(--muted); text-decoration: none; }
nav.breadcrumb a:hover{ color: var(--brand); text-decoration: underline; }
nav.breadcrumb .sep{ color: #94A3B8; }

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1200px 500px at 10% -20%, color-mix(in srgb, var(--accent) 15%, transparent), transparent),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, white), #fff 60%);
  padding-block: clamp(42px, 7vw, 96px);
  border-bottom: 1px solid var(--border);
}
.hero h1{ color: var(--ink); }
.hero .subtitle{ max-width: 70ch; }
.hero .cta{ margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- Sections ---------- */
section{ padding-block: var(--s-7); }
section > .section-head{
  display: flex; align-items: end; justify-content: space-between; gap: var(--s-4);
  margin-bottom: var(--s-5);
}

/* ---------- Grid system ---------- */
.grid{ display: grid; gap: var(--s-5); }
.grid.two{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.three{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.four{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------- Cards (engagement) ---------- */
.card{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(16px, 2.2vw, 24px);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: transform var(--anim), box-shadow var(--anim), border-color var(--anim);
  height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
}
.card h3{
  margin-bottom: .35rem;
}
.card p{ color: var(--muted); }

/* CTA dentro le card */
.card .cta-inline{
  margin-top: var(--s-4);
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--brand); font-weight: 600; text-decoration: none;
}
.card .cta-inline::after{
  content: "→"; transition: transform var(--anim);
}
.card .cta-inline:hover::after{ transform: translateX(4px); }

/* ---------- Lists con icone sottili ---------- */
ul.icon{
  list-style: none; padding-left: 0; margin: 0;
}
ul.icon li{
  position: relative; padding-left: 1.5rem; margin-bottom: .5rem;
}
ul.icon li::before{
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .5em;
  width: .75rem; height: .75rem; border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--accent), var(--brand));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ---------- “Compare” link list ---------- */
.compare{
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: linear-gradient(180deg, #fff, var(--bg-soft));
  border: 1px dashed color-mix(in srgb, var(--brand) 35%, var(--border));
  border-radius: var(--radius);
}
.compare h3{ margin-bottom: var(--s-3); }
.compare a{ font-weight: 600; }

/* ---------- FAQ (details/summary) ---------- */
.faq details{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: var(--s-4) var(--s-5);
  transition: border-color var(--anim), box-shadow var(--anim);
}
.faq details + details{ margin-top: var(--s-3); }
.faq summary{
  cursor: pointer;
  list-style: none;
  color: var(--ink-2);
  font-weight: 700;
  position: relative;
  padding-right: 2rem;
}
.faq summary::marker{ content: ""; }
.faq summary::after{
  content: "＋";
  position: absolute; right: 0; top: 0; color: var(--brand);
  transition: transform var(--anim);
}
.faq details[open] summary::after{ content: "－"; }
.faq details[open]{ border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); box-shadow: var(--shadow); }
.faq p{ margin-top: .5rem; color: var(--muted); }

/* ---------- CTA block ---------- */
.section-cta{
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 8%, #fff), #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-7) var(--s-5);
  text-align: center;
}
.section-cta h2{ margin-bottom: .5rem; }
.section-cta p{ color: var(--muted); margin-bottom: var(--s-4); }

/* ---------- Related links / nav ---------- */
.related{
  margin-top: var(--s-7);
  padding: var(--s-5);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.related a{ font-weight: 600; }

/* ---------- Footer (local page footer) ---------- */
.page-footer{
  margin-top: var(--s-8);
  padding: var(--s-5);
  background: #F1F5F9;
  color: var(--muted);
  font-size: var(--step--1);
  text-align: center;
  border-top: 1px solid var(--border);
}

/* ---------- Tables (se mai usate per piani di studio) ---------- */
table{
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
thead th{
  background: color-mix(in srgb, var(--brand) 6%, #fff);
  text-align: left; font-weight: 700; padding: .85rem;
  border-bottom: 1px solid var(--border);
}
tbody td{ padding: .85rem; border-top: 1px solid var(--border); }
tbody tr:hover{ background: #FAFBFF; }

/* ---------- Utilities ---------- */
.mt-0{ margin-top: 0 !important; }
.mb-0{ margin-bottom: 0 !important; }
.center{ text-align: center; }
.hidden{ display: none !important; }

/* ---------- Skip link ---------- */
.skip-link{
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus{ left: 8px; top: 8px; background: #fff; padding: .5rem .75rem; border: 2px solid var(--brand); border-radius: 8px; z-index: 9999; }

/* ---------- Dark mode opzionale ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --ink: #E5EAF2;
    --ink-2: #E2E8F0;
    --muted: #CBD5E1;
    --bg: #0B1220;
    --bg-soft: #0F172A;
    --border: #1F2A44;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  body{ background: var(--bg); color: var(--ink); }
  .hero{ border-bottom-color: var(--border); }
  .card{ background: color-mix(in srgb, var(--bg) 85%, #111); }
  .faq details{ background: color-mix(in srgb, var(--bg) 85%, #111); }
  .section-cta{ background: color-mix(in srgb, var(--bg) 80%, #111); }
  .related{ background: color-mix(in srgb, var(--bg) 90%, #111); }
  table{ background: color-mix(in srgb, var(--bg) 90%, #111); }
  tbody tr:hover{ background: color-mix(in srgb, var(--brand) 10%, var(--bg)); }
}

/* ---------- Print (SEO docs handy) ---------- */
@media print{
  .hero, .section-cta, nav.breadcrumb { background: transparent !important; }
  a{ text-decoration: none; }
  .btn{ border: 1px solid #888; color: #000; background: transparent; }
}