/* Katapult — cookie consent banner + preferences modal styles.
   Layered on top of colors_and_type.css.
   Loaded on every page (hub + legal) because the banner mounts everywhere. */

/* =========================================================================
   COOKIE CONSENT BANNER
   ========================================================================= */
.kc-banner {
  position: fixed;
  z-index: 100;
  left: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  max-width: 560px;
  background: var(--k-white);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(13, 18, 101, 0.18), 0 2px 10px rgba(0,0,0,0.06);
  padding: 24px 24px 20px;
  display: flex; flex-direction: column; gap: 16px;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 360ms var(--ease-out), opacity 320ms var(--ease-out);
  pointer-events: none;
  border-top: 4px solid var(--k-brand-blue);
}
.kc-banner.is-visible {
  transform: translateY(0); opacity: 1; pointer-events: auto;
}
.kc-banner__head {
  display: flex; align-items: center; gap: 12px;
}
.kc-banner__dot {
  display: inline-grid;
  grid-template-columns: repeat(2, 5px);
  gap: 4px;
}
.kc-banner__dot span {
  width: 5px; height: 5px; border-radius: 9999px;
  background: var(--k-brand-blue);
}
.kc-banner__title {
  font-size: 13px; font-weight: var(--fw-bold);
  letter-spacing: -0.005em;
  margin: 0;
}
.kc-banner__body {
  font-size: 13.5px; line-height: 1.55;
  color: var(--fg2); margin: 0;
}
.kc-banner__body a {
  color: var(--k-brand-blue);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.kc-banner__ctas {
  display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center;
}
.kc-banner__ctas .k-btn { padding: 10px 18px; font-size: 13px; }
.kc-banner__link {
  background: none; border: none;
  font: inherit; cursor: pointer;
  font-size: 13px; color: var(--fg2);
  text-decoration: none;
  padding: 10px 4px;
  margin-left: auto;
  text-underline-offset: 4px;
}
.kc-banner__link:hover { color: var(--fg1); text-decoration: underline; }

/* =========================================================================
   PREFERENCES MODAL
   ========================================================================= */
.kc-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(13, 18, 101, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--ease-out);
}
.kc-modal.is-visible { opacity: 1; pointer-events: auto; }
.kc-modal__card {
  background: var(--k-white);
  border-radius: 16px;
  max-width: 560px; width: 100%;
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
  box-shadow: 0 40px 80px rgba(13, 18, 101, 0.3);
  transform: translateY(16px);
  transition: transform 320ms var(--ease-out);
  overflow: hidden;
}
.kc-modal.is-visible .kc-modal__card { transform: translateY(0); }
.kc-modal__head {
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.kc-modal__head h3 {
  font-size: 1.125rem; font-weight: var(--fw-bold);
  letter-spacing: -0.01em; margin: 0;
}
.kc-modal__head p {
  font-size: 13.5px; line-height: 1.55;
  color: var(--fg2); margin: 6px 0 0;
  max-width: 44ch; text-wrap: pretty;
}
.kc-modal__close {
  background: none; border: none; cursor: pointer;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  color: var(--fg2);
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.kc-modal__close:hover { background: var(--k-off-white); color: var(--fg1); }
.kc-modal__body {
  padding: 12px 28px 8px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 4px;
}
.kc-modal__row {
  padding: 18px 0;
  border-bottom: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: start;
}
.kc-modal__row:last-child { border-bottom: none; }
.kc-modal__rowh {
  font-size: 14px; font-weight: var(--fw-bold);
  margin: 0 0 4px;
  color: var(--fg1);
}
.kc-modal__rowp {
  font-size: 13px; line-height: 1.55;
  color: var(--fg2); margin: 0;
  max-width: 40ch; text-wrap: pretty;
}
.kc-modal__foot {
  padding: 20px 28px 24px;
  border-top: 1px solid var(--border-subtle);
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end;
  background: var(--k-off-white);
}
.kc-modal__foot .k-btn { padding: 10px 18px; font-size: 13px; }

/* =========================================================================
   TOGGLE SWITCH
   ========================================================================= */
.kc-switch {
  position: relative;
  width: 40px; height: 22px;
  flex-shrink: 0;
  display: inline-block;
}
.kc-switch input {
  position: absolute; inset: 0; opacity: 0;
  margin: 0; cursor: pointer;
}
.kc-switch__track {
  display: block; width: 100%; height: 100%;
  background: rgba(35,31,32,0.18);
  border-radius: 9999px;
  transition: background var(--dur-base) var(--ease-out);
}
.kc-switch__track::after {
  content: ""; position: absolute;
  left: 2px; top: 2px;
  width: 18px; height: 18px;
  background: var(--k-white);
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform var(--dur-base) var(--ease-out);
}
.kc-switch input:checked ~ .kc-switch__track { background: var(--k-brand-blue); }
.kc-switch input:checked ~ .kc-switch__track::after { transform: translateX(18px); }
.kc-switch input:disabled ~ .kc-switch__track { background: rgba(80,99,255,0.4); cursor: not-allowed; }
.kc-switch input:focus-visible ~ .kc-switch__track { box-shadow: var(--focus-ring); }