/* ==========================================================================
   EPA MEMBERSHIP · TOASTS
   The main feedback surface, front end and admin. One stylesheet, used by
   both, so a message looks the same wherever it is raised.

   MOTION LAW (START-HERE §6): transform and opacity ONLY. Never width,
   height, top or margin — those are layout, they land on the main thread,
   and a stack of them janks on a phone. When a toast leaves, the ones above
   it are moved back into place with a FLIP in toast.js: measure, set a
   transform, transition it to zero. Still only transform.

   `will-change` is added by the script for the duration of a transition and
   removed on transitionend. It is never left on — a permanently promoted
   layer is exactly what took the previous build off the compositor.

   COLOUR is the client's own palette and nothing else. There is no red in
   the EPA system and inventing one would drift the brand, so an error toast
   INVERTS instead: cream ground, ink type. It is unmistakable at a glance
   and it is never colour alone — every toast also carries a word.

   MEASURED, from the actual sRGB values:
     cream  #FCF8F1 on ink-950 #3D3829   11.04:1   normal toast
     ink-950 #3D3829 on cream #FCF8F1    11.04:1   error toast (inverted)
     beige  #E2D9CF on ink-950            8.38:1   secondary line
     sage   #C2C1AF on ink-950            6.43:1   the label
   ========================================================================== */

.epa-toasts {
  /* Appended to <body> by the script. A transformed ancestor turns
     position:fixed into position:absolute, and Elementor puts transforms on
     containers — so this layer must never live inside page markup.
     START-HERE §5. */
  position: fixed;
  z-index: 2147483000;
  inset-block-end: max(1.25rem, env(safe-area-inset-bottom));
  inset-inline-end: 1.25rem;
  inline-size: min(24rem, calc(100vw - 2.5rem));

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.625rem;

  /* The container itself must not eat clicks on the page behind it. */
  pointer-events: none;

  font-family: "Jost", "Futura", "Century Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width: 600px) {
  .epa-toasts {
    inset-inline: 0.75rem;
    inline-size: auto;
  }
}

/* --- One toast ---------------------------------------------------------- */

.epa-toast {
  --_ground: #3D3829;
  --_type:   #FCF8F1;
  --_second: #E2D9CF;
  --_accent: #C2C1AF;
  --_edge:   rgba(252, 248, 241, 0.14);
  --_life:   6000ms;

  position: relative;
  overflow: hidden;
  pointer-events: auto;

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0.75rem;

  padding: 0.95rem 1rem 1rem;
  background: var(--_ground);
  color: var(--_type);
  border: 1px solid var(--_edge);
  border-radius: 2px;
  box-shadow: 0 12px 34px -18px rgba(0, 0, 0, 0.75);

  /* Start state. The script flips .is-in on the next frame. */
  opacity: 0;
  transform: translate3d(0, 120%, 0);
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity   380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.epa-toast.is-in    { opacity: 1; transform: translate3d(0, 0, 0); }
.epa-toast.is-out   { opacity: 0; transform: translate3d(0, 28px, 0); }

/* Set by the script for the duration of a transition, cleared after. */
.epa-toast.is-moving { will-change: transform, opacity; }

/* The one frame of a FLIP where the element is put back where it was. */
.epa-toast.is-flip  { transition: none; }

/* --- Contents ----------------------------------------------------------- */

.epa-toast__body { min-inline-size: 0; }

.epa-toast__label {
  display: block;
  margin: 0 0 0.3rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--_accent);
}

.epa-toast__message {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--_type);
  overflow-wrap: anywhere;
}

.epa-toast__close {
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  margin: -0.2rem -0.25rem 0 0;
  padding: 0;
  display: grid;
  place-items: center;

  background: none;
  border: 0;
  border-radius: 2px;
  color: var(--_second);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.epa-toast__close:hover,
.epa-toast__close:focus-visible { opacity: 1; }

.epa-toast__close:focus-visible {
  outline: 2px solid var(--_accent);
  outline-offset: 2px;
}

/* --- The life bar -------------------------------------------------------
   A CSS animation rather than a JS-driven width, so pausing it on hover is
   one declaration and the browser keeps it on the compositor. scaleX, never
   width. The script pauses its own dismiss timer at the same moment, so the
   bar and the timer never disagree. */

.epa-toast__bar {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--_accent);
  transform: scaleX(1);
  transform-origin: left center;
}

.epa-toast.is-in .epa-toast__bar {
  animation: epa-toast-life var(--_life) linear forwards;
}

.epa-toast:hover  .epa-toast__bar,
.epa-toast:focus-within .epa-toast__bar { animation-play-state: paused; }

/* A toast with no auto-dismiss shows no bar at all. */
.epa-toast.is-sticky .epa-toast__bar { display: none; }

@keyframes epa-toast-life {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* --- Types --------------------------------------------------------------
   Never colour alone: each type also carries its own word in .epa-toast__label. */

.epa-toast.is-success { --_accent: #C2C1AF; }
.epa-toast.is-info    { --_accent: #E2D9CF; }

.epa-toast.is-error {
  --_ground: #FCF8F1;
  --_type:   #3D3829;
  --_second: #625B42;
  --_accent: #726050;
  --_edge:   rgba(114, 96, 80, 0.45);
}

/* --- Reduced motion -----------------------------------------------------
   No travel at all: the toast fades in place. The life bar stays, because it
   is feedback about a timer that is genuinely running, not decoration. */

@media (prefers-reduced-motion: reduce) {
  .epa-toast {
    transform: none;
    transition: opacity 200ms linear;
  }
  .epa-toast.is-in  { transform: none; }
  .epa-toast.is-out { transform: none; }
}