/**
 * Analytics consent banner (library keido_edge/consent).
 *
 * October 2026, UX handoff option 1c: a raised ink bar held at the bottom
 * of the window with position: sticky. It is printed by html.html.twig as
 * a direct child of <body> after the page and its footer, so it keeps its
 * own place in the flow: nothing on the page is hidden under it, and when
 * reopened from Cookie settings it sits below the footer rather than over
 * it. Closing uses display: none, which also gives back its space.
 *
 * Shown only while <html data-consent="pending"> (set by consent.js).
 * While it shows, <body> becomes a full-height column so the bar still
 * reaches the bottom of the window on pages shorter than the window.
 *
 * Unlayered like uform.css so it wins over the Tailwind build without
 * specificity games. Every class is prefixed k-consent.
 */

.k-consent {
  display: none;
}

html[data-consent="pending"] .k-consent {
  display: block;
}

/* Keep keyboard focus clear of the sticky bar (WCAG 2.4.11 focus not
   obscured). --k-consent-height is the bar's live height, from consent.js;
   the fallback covers the tallest layout (320px wide). */
html[data-consent="pending"] {
  scroll-padding-bottom: calc(var(--k-consent-height, 200px) + 16px);
}

/* Short pages: push the bar to the bottom of the window. Scoped to the
   pending state so the rest of the site's layout is untouched. */
html[data-consent="pending"] body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.k-consent {
  --k-consent-ground: #22344c;
  --k-consent-hairline: rgba(244, 241, 234, 0.22);

  position: sticky;
  bottom: 0;
  z-index: 1000;
  margin-top: auto;
  padding: 20px var(--spacing-gutter, 24px);
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--k-consent-ground);
  color: var(--color-dark-ink-secondary, #c5cdda);
  border-top: 1px solid var(--k-consent-hairline);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
  font-family: var(--font-ui, "Public Sans", Helvetica, Arial, sans-serif);
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-consent="pending"] .k-consent {
    animation: k-consent-rise 0.28s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  }
  @keyframes k-consent-rise {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
}

.k-consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  max-width: var(--container-site, 80rem);
  margin: 0 auto;
}

.k-consent__copy {
  flex: 1 1 32rem;
  min-width: 0;
}

.k-consent__title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-dark-ink, #f4f3f1);
}

.k-consent__text {
  margin: 0;
}

/* One body string per width; the other is not displayed at all. */
.k-consent__text--narrow {
  display: none;
}

.k-consent__text a {
  color: var(--color-dark-ink, #f4f3f1);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.k-consent__text a:hover,
.k-consent__text a:focus-visible {
  color: var(--color-accent-on-dark, #f08a63);
}
.k-consent__text a:focus-visible {
  outline: 2px solid var(--color-accent-on-dark, #f08a63);
  outline-offset: 2px;
}

.k-consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  flex: 0 0 auto;
}

.k-consent__btn {
  appearance: none;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-card-sm, 0);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--transition-base, 0.2s), color var(--transition-base, 0.2s), border-color var(--transition-base, 0.2s);
}

.k-consent__btn--accept {
  background: var(--color-dark-ink, #f4f3f1);
  border-color: var(--color-dark-ink, #f4f3f1);
  color: var(--color-ground, #1f2a44);
}
.k-consent__btn--accept:hover,
.k-consent__btn--accept:focus-visible {
  background: var(--color-accent-on-dark, #f08a63);
  border-color: var(--color-accent-on-dark, #f08a63);
}

.k-consent__btn--decline {
  background: transparent;
  border-color: var(--color-ground-line-strong, #4e5a78);
  color: var(--color-dark-ink, #f4f3f1);
}
.k-consent__btn--decline:hover,
.k-consent__btn--decline:focus-visible {
  border-color: var(--color-dark-ink, #f4f3f1);
}

.k-consent__btn:focus-visible {
  outline: 2px solid var(--color-accent-on-dark, #f08a63);
  outline-offset: 2px;
}

/* Footer "Cookie settings" control: a button dressed as a footer link. */
.k-consent-reopen {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.k-consent-reopen:hover,
.k-consent-reopen:focus-visible {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .k-consent {
    padding-top: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    font-size: 0.875rem;
  }
  .k-consent__inner {
    gap: 12px;
  }
  .k-consent__text--wide {
    display: none;
  }
  .k-consent__text--narrow {
    display: block;
  }
  .k-consent__actions {
    width: 100%;
  }
  .k-consent__btn {
    flex: 1 1 auto;
    text-align: center;
  }
}