/* Cookie consent banner.

   Self-contained and prefixed `jc-cc`, because this markup renders inside two
   different styling systems: the marketing pages (resources/css/marketing.css,
   scoped under .jc-site) and the Tailwind app. It must not inherit from either
   and must not leak into either, so everything here is explicit. */

.jc-cc {
  position: fixed;
  z-index: 9999;
  inset-inline: 0;
  bottom: 0;
  padding: 0.75rem;
  font-family: Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* The banner is dismissible and never covers the whole viewport: a consent
     prompt that blocks the page is a dark pattern in the other direction, and
     it would hide the cookie policy the copy points at. */
  pointer-events: none;
}

.jc-cc[hidden] {
  display: none;
}

.jc-cc-inner {
  pointer-events: auto;
  box-sizing: border-box;
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  background: #ffffff;
  color: #1f2933;
  border: 1px solid #d7dde5;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 30, 50, 0.18);
}

/* The first layer is the row; the settings panel below it is a column. Both
   live in the same form, and only one is on screen at a time. */
.jc-cc-layer[data-cc-layer="banner"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

/* `hidden` has to win over the display above, or the collapsed layer stays on
   screen. */
.jc-cc-layer[hidden] {
  display: none;
}

.jc-cc-copy {
  flex: 1 1 22rem;
  min-width: 0;
}

.jc-cc-title {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #10202f;
}

.jc-cc-copy p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #46586b;
}

.jc-cc-copy a {
  color: #1f6fb2;
  text-decoration: underline;
}

.jc-cc-copy a:hover {
  color: #17527f;
}

.jc-cc-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.jc-cc-btn {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.625rem 1.125rem;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.jc-cc-btn:focus-visible {
  outline: 2px solid #1f6fb2;
  outline-offset: 2px;
}

.jc-cc-btn-primary {
  background: #1f6fb2;
  border-color: #1f6fb2;
  color: #ffffff;
}

.jc-cc-btn-primary:hover {
  background: #17527f;
  border-color: #17527f;
}

.jc-cc-btn-ghost {
  background: #ffffff;
  border-color: #c6cfd9;
  color: #34465a;
}

.jc-cc-btn-ghost:hover {
  background: #f2f5f8;
  border-color: #aab6c4;
}

/* Both choices must be equally reachable and equally prominent: "Decline" being
   harder to find than "Allow" is the pattern regulators single out. They differ
   in colour, not in size or position. */
@media (max-width: 34rem) {
  .jc-cc-actions {
    flex: 1 1 100%;
  }

  .jc-cc-btn {
    flex: 1 1 0;
    text-align: center;
  }
}

@media (prefers-color-scheme: dark) {
  .jc-cc-inner {
    background: #16202b;
    border-color: #2c3b4c;
    color: #e6edf4;
  }

  .jc-cc-title {
    color: #f2f7fb;
  }

  .jc-cc-copy p {
    color: #adbdcd;
  }

  .jc-cc-copy a {
    color: #7db8e8;
  }

  .jc-cc-btn-ghost {
    background: transparent;
    border-color: #3d4f63;
    color: #d6e2ee;
  }

  .jc-cc-btn-ghost:hover {
    background: #1f2c3a;
  }
}

/* ---- Settings panel -------------------------------------------------------

   The second layer of the banner. It names the strictly necessary cookies and
   their duration, and turns analytics on or off on its own — the panel the
   approved banner copy requires, and the control the cookie notice points at.
   Same card, same form: only the contents swap. */

.jc-cc-panel {
  max-height: min(60vh, 32rem);
  overflow-y: auto;
}

.jc-cc-group {
  padding: 0.75rem 0;
  border-top: 1px solid #e4e9ef;
}

.jc-cc-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.jc-cc-group-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #10202f;
}

.jc-cc-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: #eef3f8;
  color: #46586b;
  border: 1px solid #d7dde5;
}

.jc-cc-badge-optional {
  background: #ffffff;
}

.jc-cc-panel p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #46586b;
}

.jc-cc-cookies {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.75rem;
  line-height: 1.7;
  color: #46586b;
}

.jc-cc-cookies code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7188rem;
  background: #f2f5f8;
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
}

.jc-cc-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  margin-top: 0.5rem;
}

.jc-cc-radios label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: #34465a;
  cursor: pointer;
}

.jc-cc-panel .jc-cc-actions {
  padding-top: 0.75rem;
  border-top: 1px solid #e4e9ef;
}

/* "Cookie settings" sits beside the two answers and must not read as a third
   answer: it is styled as a link, not as a button competing with them. */
.jc-cc-btn-link {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border-color: transparent;
  color: #1f6fb2;
  text-decoration: underline;
}

.jc-cc-btn-link:hover {
  color: #17527f;
}

@media (prefers-color-scheme: dark) {
  .jc-cc-group,
  .jc-cc-panel .jc-cc-actions {
    border-color: #2c3b4c;
  }

  .jc-cc-group-name {
    color: #f2f7fb;
  }

  .jc-cc-panel p,
  .jc-cc-cookies {
    color: #adbdcd;
  }

  .jc-cc-badge {
    background: #1f2c3a;
    border-color: #3d4f63;
    color: #adbdcd;
  }

  .jc-cc-badge-optional {
    background: transparent;
  }

  .jc-cc-cookies code {
    background: #1f2c3a;
  }

  .jc-cc-radios label {
    color: #d6e2ee;
  }

  .jc-cc-btn-link {
    color: #7db8e8;
  }
}