/* Everything that is NOT in ref.css. ref.css is a purged Tailwind build and must not be
   edited: a class that was purged out silently does nothing. New styles go here, as plain CSS. */

/* Safari < 15.4 has no oklch(): ref.css declares --background/--foreground in oklch only, so
   those custom properties resolve to nothing and the page renders white-on-white. The @supports
   guard matters — this file loads after ref.css, so an unguarded :root would also override the
   real oklch values in browsers that do support them. */
@supports not (color: oklch(0% 0 0)) {
  :root {
    --background: #141414;
    --foreground: #ededed;
    --card: #1f1f1f;
    --card-foreground: #ededed;
    --popover: #1f1f1f;
    --popover-foreground: #ededed;
    --primary: #ff6600;
    --primary-foreground: #f2f2f2;
    --secondary: #262626;
    --secondary-foreground: #d6d6d6;
    --muted: #404040;
    --muted-foreground: #b3b3b3;
    --accent: #ff6600;
    --accent-foreground: #1a1a1a;
    --destructive: #dc2626;
    --destructive-foreground: #fafafa;
    --border: #333333;
    --input: #262626;
    --ring: #ff6600;
  }
}

/* ref.css carries the reference author's own base typography as BARE element rules, including
   `@media (min-width:48rem){ h1{font-size:var(--text-7xl)} h2{--text-6xl} h3{--text-3xl} }`.
   Those beat Tailwind's `text-*` utilities on any heading, because the utilities live in
   `@layer utilities` while these do not. Effect: on a heading element every `text-*` class is
   dead — the landing page inherits this (and matches the reference exactly because it is the
   same CSS on the same tags), but our own pages need a way to win the size back.
   A class selector (0,1,0) outranks a bare `h1` (0,0,1) at any layer, so one class is enough. */
.ev-h-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.ev-h-2xl { font-size: 1.5rem; line-height: 2rem; }
.ev-h-lg { font-size: 1.125rem; line-height: 1.75rem; }

/* The reference's stagger utilities set animation-delay but leave fill-mode at `none`, so
   cards 2-4 flash at full opacity for their delay before the animation starts. */
[class*='animate-slide-in'],
.animate-zoom-in,
.animate-fade-in {
  animation-fill-mode: both;
}

/* 100vh on iOS Safari includes the browser chrome, so the hero sits misaligned. */
@supports (height: 100dvh) {
  @media (max-width: 767px) {
    .ev-hero { height: 100dvh; }
  }
}

/* On a narrow viewport the map is 1919px wide: keep the city centre in frame. */
@media (max-width: 767px) {
  .ev-hero img { object-position: 60% center; }
}

/* Classi usate nel nostro markup che ref.css (build purgato) non contiene. Senza queste
   definizioni non farebbero assolutamente nulla, in silenzio.
   Il guardiano che le trova: php evalon/tools/check-classi.php */
.accent-\[\#ff6600\] { accent-color: #ff6600; }
.rounded-2xl { border-radius: 1rem; }
.inline { display: inline; }
.resize-y { resize: vertical; }
.border-destructive\/40 { border-color: color-mix(in oklab, var(--destructive) 40%, transparent); }
.border-accent\/40 { border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
.hover\:text-accent:hover { color: var(--accent); }
.hover\:text-destructive:hover { color: var(--destructive); }
.hover\:bg-destructive\/10:hover { background-color: color-mix(in oklab, var(--destructive) 10%, transparent); }

@media (min-width: 48rem) {
  .md\:w-64 { width: 16rem; }
}

/* Riga della tabella admin: l'ancora #rN del fallback senza JS non deve finire sotto la nav
   sticky, e un lampo breve conferma l'aggiornamento in place quando il JS c'è. */
.ev-row { scroll-margin-top: 6rem; }

.ev-row--flash { background: rgb(255 102 0 / .12); }

/* Native <dialog>: the browser gives us backdrop, ESC and focus trapping. It only needs
   centring and a width — ref.css has no dialog styles. */
.ev-dialog {
  /* `margin: auto` is what centres a native <dialog>; ref.css's preflight zeroes margins on
     every element, so without this the modal sticks to the top-left corner. */
  margin: auto;
  width: min(34rem, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.ev-dialog::backdrop {
  background: rgb(0 0 0 / .7);
}

/* Honeypot: reachable by a bot filling every field, invisible and unfocusable for a human. */
.ev-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Toasts — the sonner look: bottom-right dark card, icon, slide in, auto-dismiss. */
.ev-toast-wrap {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}

.ev-toast {
  display: flex;
  align-items: center;
  gap: .625rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: .875rem 1rem;
  border: 1px solid #333;
  border-radius: .5rem;
  background: #1a1a1a;
  color: #ededed;
  font-size: .875rem;
  line-height: 1.35;
  box-shadow: 0 8px 24px rgb(0 0 0 / .45);
  animation: ev-toast-in .25s ease-out both;
}

.ev-toast--ok {
  border-color: rgb(255 102 0 / .5);
  color: #ff6600;
}

.ev-toast--out {
  animation: ev-toast-out .3s ease-in both;
}

@keyframes ev-toast-in {
  from { opacity: 0; transform: translateY(.75rem) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes ev-toast-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(.5rem) scale(.97); }
}

/* A server-rendered flash starts outside .ev-toast-wrap, so it needs its own placement. */
[data-ev-flash] {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
}

@media (prefers-reduced-motion: reduce) {
  .ev-toast, .ev-toast--out { animation: none; }
  [class*='animate-'] { animation: none !important; opacity: 1 !important; }
}