/*
  Stile della landing AppMeetingReservation.
  Estratto dal <style> in linea della versione statica: stessa grammatica
  visiva, ora in un file a se' cosi' e' cacheabile e diffabile.
  Le classi utility restano Tailwind (config nel <head> di index.php).
*/

html { scroll-behavior: smooth; }
/* Alpine: evita il lampeggio degli elementi nascosti prima del mount. */
[x-cloak] { display: none !important; }


body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #0B1F2A;
  background: #F5F8F8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .display { font-family: 'Sora', system-ui, sans-serif; letter-spacing: -.02em; }

/* Logo: wordmark SVG, si adatta al contenitore */
.light-logo, .dark-logo {
  max-width: 250px;
  width: 100%;
  height: auto;
  display: block;
}
/* Nel footer il logo e' la variante gia' bianca (file dedicato): nessun
   filtro CSS, cosi' resta nitido anche in stampa e su fondi diversi. */

.text-arena { color: #F05A1F; }
.brand-stripe { height: 3px; border-radius: 99px; background: #F05A1F; }

.bg-paper-grid {
  background-image:
    radial-gradient(1100px 500px at 100% -10%, #F05A1F1f, transparent 60%),
    radial-gradient(800px 500px at -10% 30%, rgba(26,168,168,.10), transparent 60%),
    linear-gradient(rgba(11,31,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,31,42,.04) 1px, transparent 1px);
  background-size: auto, auto, 38px 38px, 38px 38px;
}

.btn-primary {
  background: linear-gradient(180deg, #1AA8A8, #0E8A8A);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(26,168,168,.6), inset 0 -2px 0 rgba(0,0,0,.12);
}
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-ghost { color:#0B1F2A; border:1px solid #0B1F2A1f; background:#fff; }
.btn-ghost:hover { border-color:#1AA8A8; color:#0E8A8A; }
.btn-brand {
  background: #F05A1F;
  color: #fff;
  box-shadow: 0 10px 24px -10px #F05A1F8c, inset 0 -2px 0 rgba(0,0,0,.12);
}
.btn-brand:hover { background: #C13E0A; transform: translateY(-1px); }

.card-hover { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; }
.card-hover:hover { transform: translateY(-3px); border-color: rgba(26,168,168,.4); box-shadow: 0 20px 40px -20px rgba(11,31,42,.18); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

.nav-blur { backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); }

.premium-badge { background: #F05A1F; color: #fff; }

/* Campi del modulo: il focus arancio era in linea su ogni input, qui e' una
   regola sola. Il focus ring resta visibile (accessibilita'). */
.amr-input {
  width: 100%;
  padding: .75rem .875rem;
  border-radius: .75rem;
  border: 1px solid #E1E8E8;
  background: #F5F8F8;
  font-size: .875rem;
  outline: none;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.amr-input:focus {
  background: #fff;
  border-color: #F05A1F;
  box-shadow: 0 0 0 3px rgba(240,90,31,.2);
}
.amr-input[aria-invalid="true"] { border-color: #FF6B6B; }
.amr-field-error { color: #C13E0A; font-size: 12px; margin-top: .25rem; }

@supports (padding: env(safe-area-inset-bottom)) {
  .safe-bottom { padding-bottom: calc(env(safe-area-inset-bottom) + .75rem); }
}

/* Hero visual: mini calendario del mockup */
.cal-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell { aspect-ratio: 1; border-radius: 8px; display:grid; place-items:center; font-size: 11px; font-weight: 600; }

/* Chi preferisce meno movimento non subisce le animazioni di ingresso. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card-hover, .btn-primary, .btn-brand { transition: none; }
  .card-hover:hover, .btn-primary:hover, .btn-brand:hover { transform: none; }
  .animate-rise, .animate-pulse-soft, .animate-float { animation: none !important; }
}
