/* =========================================================================
   Ambulatorio Veterinario Dott.ssa Graziella Del Ninno — Cremona
   Design system ricalcato sui token reali di AniCura (anicura.it).
   Firma grafica: raggio asimmetrico (alto-sx + basso-dx), palette navy/azzurro,
   CTA gialla, badge emergenza rosa, ombre molto morbide e diffuse.
   ========================================================================= */

:root {
  /* --- Colori: valori presi dal theme AniCura --- */
  --brand:            #00263e;
  --brand-sm:         #234b64;

  --primary:          #2ca0c4;
  --primary-tone:     #95d3e6;
  --primary-sm:       #aadceb;
  --primary-xs:       #cae9f2;
  --primary-xxs:      #eaf6fa;
  --primary-xxxs:     #f5fafc;

  --accent:           #cb8600;
  --accent-tone:      #f5d282;
  --accent-sm:        #f0d696;
  --accent-xs:        #f4e5c1;
  --accent-badge:     #ebbc4e;

  --extra:            #e96980;
  --extra-lg:         #dc3453;
  --extra-tone:       #ef798f;
  --extra-sm:         #f294a6;
  --extra-xs:         #f7bcc7;
  --extra-xxs:        #fce4e9;
  --extra-text:       #452329;

  --secondary:        #28aa5c;
  --secondary-xs:     #e6f3ec;
  --text-secondary:   #235136;

  --petrol:           #0c838b;
  --petrol-80:        #5babb3;
  --petrol-50:        #add5d9;
  --petrol-20:        #deeef0;

  --subtle:           #dfe5e7;
  --subtle-sm:        #e9eff1;
  --subtle-xs:        #f3f7f8;
  --subtle-xxs:       #f8fafb;

  --text:             #00263e;
  --text-soft:        #466978;
  --text-muted:       #6a6f70;
  --base:             #fff;

  /* --- Tipografia: AniCura usa Guardian Sans con fallback Public Sans --- */
  --font-display: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-base:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Spaziature (scala AniCura) --- */
  --sp-xxs: 4px;  --sp-xs: 8px;   --sp-sm: 12px;  --sp-md: 16px;
  --sp-lg: 24px;  --sp-xl: 32px;  --sp-2xl: 40px; --sp-3xl: 64px;
  --sp-4xl: 96px; --sp-5xl: 128px;

  /* --- Raggio asimmetrico: la firma AniCura (TL e BR arrotondati) --- */
  --r-xs: 8px 0;
  --r-sm: 12px 0;
  --r-md: 16px 0;
  --r-lg: 24px 0;
  --r-xl: 40px 0;

  /* --- Ombre --- */
  --shadow-xs:   0 2px 16px rgba(0, 0, 0, .08);
  --shadow-sm:   0 4px 24px rgba(0, 0, 0, .12);
  --shadow-card: 0 8px 120px rgba(0, 0, 0, .15);

  --container: 1280px;
  --content: 1152px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--base);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand);
  margin: 0;
  letter-spacing: -.5px;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.02; letter-spacing: -1px; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); line-height: 1.1; }
h3 { font-size: clamp(1.15rem, 2vw, 1.375rem); line-height: 1.25; }
h4 { font-size: 1rem; line-height: 1.3; }
p  { margin: 0 0 var(--sp-md); }

/* Occhiello: minuscolo, maiuscoletto spaziato, grigio (pattern AniCura) */
.eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--sp-xs);
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-lg); }
.section { padding: var(--sp-3xl) 0; }
.section--tint { background: var(--primary-xxxs); }
.lead { font-size: 1.125rem; line-height: 1.6; color: var(--text-soft); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--primary-sm); color: var(--brand);
  padding: var(--sp-sm) var(--sp-lg); border-radius: var(--r-sm); font-weight: 600;
}
.skip-link:focus { left: var(--sp-md); top: var(--sp-md); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .5px;
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid transparent; border-radius: var(--r-sm);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--lg { font-size: 20px; padding: var(--sp-lg) var(--sp-2xl); }
.btn--accent  { background: var(--accent-tone); color: var(--brand); }
.btn--accent:hover  { background: var(--accent-sm); }
.btn--primary { background: var(--primary-sm); color: var(--brand); }
.btn--primary:hover { background: var(--primary-tone); }
.btn--urgent  { background: var(--extra-xs); color: var(--extra-text); }
.btn--urgent:hover  { background: var(--extra-sm); }
.btn--ghost   { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--ghost:hover   { background: var(--brand); color: #fff; }
.btn--petrol  { background: var(--petrol); color: #fff; }
.btn--petrol:hover  { background: var(--petrol-80); }

/* ---------- Barra utility + header ---------- */
.utility {
  background: var(--brand); color: #fff;
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
}
.utility .container { display: flex; align-items: center; gap: var(--sp-md); min-height: 44px; }
.utility__badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-badge); color: var(--brand);
  padding: var(--sp-xs) var(--sp-sm); border-radius: var(--r-sm);
}
.utility__link {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--petrol); color: #fff;
  padding: var(--sp-xs) var(--sp-sm); border-radius: var(--r-sm);
}
.utility__spacer { margin-left: auto; }
.utility svg { width: 15px; height: 15px; }

.header {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--subtle-sm);
}
.header .container { display: flex; align-items: center; gap: var(--sp-md); min-height: 76px; }
.logo { display: flex; align-items: center; gap: var(--sp-sm); }
.logo__mark { width: 44px; height: 44px; flex: none; }
.logo__text { font-family: var(--font-display); line-height: 1.05; }
.logo__name { display: block; font-size: 20px; font-weight: 700; color: var(--brand); letter-spacing: -.4px; }
.logo__sub  { display: block; font-size: 9.5px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); }

.nav { display: flex; align-items: center; gap: var(--sp-lg); margin-left: auto; }
.nav__link {
  font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--brand);
  padding: var(--sp-xs) 0; border-bottom: 2px solid transparent;
}
.nav__link:hover, .nav__link[aria-current="page"] { border-bottom-color: var(--primary); }
.header__actions { display: flex; align-items: center; gap: var(--sp-xs); }

.burger {
  display: none; width: 48px; height: 48px;
  background: #fff; border: 1px solid var(--subtle); border-radius: var(--r-sm);
  align-items: center; justify-content: center;
}
.burger svg { width: 22px; height: 22px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: var(--sp-2xl) 0 var(--sp-3xl); background: var(--primary-xxxs); overflow: hidden; }
/* pattern zampette molto tenue, come lo sfondo AniCura */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%2300263e' fill-opacity='0.035'%3E%3Cellipse cx='30' cy='34' rx='7' ry='9'/%3E%3Cellipse cx='16' cy='18' rx='4' ry='5.5'/%3E%3Cellipse cx='29' cy='13' rx='4' ry='5.5'/%3E%3Cellipse cx='42' cy='19' rx='4' ry='5.5'/%3E%3Cellipse cx='90' cy='94' rx='7' ry='9'/%3E%3Cellipse cx='76' cy='78' rx='4' ry='5.5'/%3E%3Cellipse cx='89' cy='73' rx='4' ry='5.5'/%3E%3Cellipse cx='102' cy='79' rx='4' ry='5.5'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.hero__card {
  position: relative; z-index: 3;
  background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-card);
  padding: var(--sp-2xl);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2xl); align-items: center;
  max-width: var(--content); margin: 0 auto;
}
.hero__status { display: flex; align-items: center; gap: var(--sp-xs); font-size: 15px; margin-bottom: var(--sp-sm); }
.hero__status strong { font-family: var(--font-display); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; font-size: 13px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--secondary); flex: none; }
.dot--closed { background: var(--extra-lg); }
.hero__title { margin-bottom: var(--sp-lg); }
.hero__tagline { font-size: 1.0625rem; color: var(--text-soft); margin-bottom: var(--sp-xl); max-width: 44ch; }
.hero__cta { margin-bottom: var(--sp-xl); display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.hero__media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Righe contatto con icona quadrata azzurra */
.infolist { display: flex; flex-direction: column; gap: var(--sp-sm); }
.infolist__row { display: flex; align-items: center; gap: var(--sp-md); font-size: 15px; }
.infolist__icon {
  width: 44px; height: 44px; flex: none;
  background: var(--primary-xxs); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; color: var(--primary);
}
.infolist__icon svg { width: 20px; height: 20px; }
.infolist__row a { font-weight: 600; }
.infolist__row a:hover { color: var(--primary); text-decoration: underline; }

/* ---------- Card generiche ---------- */
.card {
  background: #fff; border: 1px solid var(--subtle-sm);
  border-radius: var(--r-lg); padding: var(--sp-lg);
}
.card--flat { border: 0; background: var(--subtle-xxs); }
.grid { display: grid; gap: var(--sp-lg); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Orari ---------- */
.hours { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg); max-width: var(--content); margin: 0 auto; }
.hours__day { background: #fff; border: 1px solid var(--subtle-sm); border-radius: var(--r-lg); padding: var(--sp-lg); }
.hours__date { font-size: 13px; color: var(--text-muted); }
.hours__row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sp-sm) 0; border-bottom: 1px solid var(--subtle-xs); }
.hours__row:last-child { border-bottom: 0; }
.hours__row span:last-child { font-family: var(--font-display); font-weight: 600; }
.hours__closed { color: var(--extra-lg); }
.hours__table { width: 100%; border-collapse: collapse; }
.hours__table th, .hours__table td { text-align: left; padding: var(--sp-sm) 0; border-bottom: 1px solid var(--subtle-xs); font-size: 15px; }
.hours__table th { font-weight: 500; color: var(--text-soft); }
.hours__table td { font-family: var(--font-display); font-weight: 600; text-align: right; }
.hours__table tr:last-child th, .hours__table tr:last-child td { border-bottom: 0; }

/* ---------- Servizi ---------- */
.service { background: #fff; border: 1px solid var(--subtle-sm); border-radius: var(--r-lg); padding: var(--sp-lg); transition: box-shadow .2s ease, transform .2s ease; }
.service:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.service__icon { width: 52px; height: 52px; border-radius: var(--r-sm); background: var(--primary-xxs); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-md); }
.service__icon svg { width: 26px; height: 26px; }
.service h3 { margin-bottom: var(--sp-xs); }
.service p { font-size: 15px; color: var(--text-soft); margin: 0; }

/* ---------- Sezione split testo/immagine ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3xl); align-items: center; max-width: var(--content); margin: 0 auto; }
.split__media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-card); }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split--rev .split__media { order: -1; }

/* ---------- Banner (pronto soccorso / cta) ---------- */
.banner {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2xl); align-items: center;
  border-radius: var(--r-xl); overflow: hidden; max-width: var(--content); margin: 0 auto;
}
.banner__body { padding: var(--sp-2xl); }
.banner__body h2 { margin-bottom: var(--sp-sm); }
.banner--urgent { background: var(--extra-xxs); }
.banner--urgent h2 { color: var(--extra-text); }
.banner--soft { background: var(--primary-xxs); }
.banner__media { align-self: stretch; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }

/* ---------- Team ---------- */
.person { text-align: left; }
.person__photo { border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-md); background: var(--subtle-xs); }
.person__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.person__role { font-family: var(--font-display); font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.person h3 { margin: var(--sp-xxs) 0; }
.person__spec { font-size: 14px; color: var(--text-soft); margin: 0; }

/* ---------- Galleria ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); max-width: var(--content); margin: 0 auto; }
.gallery figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs); background: var(--subtle-xs); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption { font-size: 13px; color: var(--text-muted); padding: var(--sp-sm) var(--sp-md); background: #fff; }

/* ---------- Recensioni ---------- */
.quote { background: var(--secondary-xs); border-radius: var(--r-lg); padding: var(--sp-lg); }
.quote p { font-size: 15px; font-style: italic; color: var(--text-secondary); }
.quote footer { font-size: 13px; font-weight: 600; color: var(--text-soft); font-style: normal; }

/* ---------- Form ---------- */
.form { display: grid; gap: var(--sp-md); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--font-display); font-size: 14px; font-weight: 500; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15px; padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--subtle); border-radius: var(--r-sm); background: #fff; color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-xxs); }
.field textarea { min-height: 130px; resize: vertical; }
.form__note { font-size: 13px; color: var(--text-muted); }
.form__ok { background: var(--secondary-xs); color: var(--text-secondary); padding: var(--sp-md); border-radius: var(--r-sm); font-size: 15px; }

/* ---------- Mappa (caricata solo dopo consenso, come da linee guida del Garante) ---------- */
.map { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-card); max-width: var(--content); margin: 0 auto; }
.map iframe { width: 100%; height: 420px; border: 0; display: block; }
.map__consent {
  height: 420px; background: var(--primary-xxs);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--sp-lg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%232ca0c4' stroke-opacity='0.16' stroke-width='1'%3E%3Cpath d='M0 40h80M40 0v80'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Avviso dati da confermare (solo in PROVA) ---------- */
.draftbar {
  background: var(--accent-xs); color: #6c582e;
  font-size: 13px; text-align: center; padding: var(--sp-xs) var(--sp-md);
}

/* ---------- Footer ---------- */
.footer { background: var(--brand); color: #fff; padding: var(--sp-3xl) 0 var(--sp-lg); margin-top: var(--sp-3xl); }
.footer h3 { color: #fff; font-size: 15px; letter-spacing: .3px; margin-bottom: var(--sp-md); }
.footer a { color: rgba(255,255,255,.85); }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-2xl); }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-sm); font-size: 15px; color: rgba(255,255,255,.85); }
.footer__legal {
  margin-top: var(--sp-2xl); padding-top: var(--sp-lg);
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: 12px; line-height: 1.7; color: rgba(255,255,255,.65);
}
.footer__legal a { color: rgba(255,255,255,.8); text-decoration: underline; }

/* ---------- Barra azioni mobile ---------- */
.actionbar { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero__card { grid-template-columns: 1fr; padding: var(--sp-lg); }
  .hero__media { order: -1; }
  .split, .banner { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .split--rev .split__media { order: 0; }
  .banner__body { padding: var(--sp-lg); }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
  .burger { display: flex; }
}

@media (max-width: 640px) {
  .section { padding: var(--sp-2xl) 0; }
  .hours { grid-template-columns: 1fr; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .form__row { grid-template-columns: 1fr; }
  .utility .container { gap: var(--sp-xs); font-size: 11px; }
  .utility__hide-sm { display: none; }
  .header .container { min-height: 64px; }
  .logo { min-width: 0; }
  .logo__mark { width: 38px; height: 38px; }
  .logo__name { font-size: 17px; }
  /* Le azioni sono già nella barra fissa in fondo: nell'header basta il menu. */
  .header__actions .btn { display: none; }
  body { padding-bottom: 68px; }
  .actionbar {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--subtle); box-shadow: 0 -2px 16px rgba(0,0,0,.08);
  }
  .actionbar a {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-xs);
    padding: var(--sp-md); font-family: var(--font-display); font-weight: 600; font-size: 15px;
  }
  .actionbar a svg { width: 18px; height: 18px; }
  .actionbar a:first-child { background: var(--accent-tone); color: var(--brand); }
  .actionbar a:last-child { background: var(--extra-xs); color: var(--extra-text); }
}

/* Menu mobile aperto */
.nav.is-open {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-bottom: 1px solid var(--subtle-sm); box-shadow: var(--shadow-sm);
  padding: var(--sp-sm) var(--sp-lg) var(--sp-lg);
}
.nav.is-open .nav__link { padding: var(--sp-sm) 0; border-bottom: 1px solid var(--subtle-xs); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}