/* Klaro cookie-consent overrides.
 *
 * Bug 23: GDPR principle — Decline must carry the same visual weight as
 * Accept. Klaro's default paints the accept button green and leaves decline
 * as a dim gray, which is a nudge regulators (and German DPAs) frown on.
 *
 * Bug 24c: At sub-384px viewports the bar buttons get
 * `width: calc(50% - 0.5em)`. Long localized labels ("Optionale ablehnen",
 * "Только необходимые") clip to ellipsis. Allow the label to wrap onto two
 * lines instead of truncating.
 *
 * Scope: only the bottom bar (`.cookie-notice:not(.cookie-modal-notice)`).
 * The full settings modal keeps Klaro's default look — it is a deliberate
 * second screen, not a primary surface.
 */

/* Klaro cookie consent bar — documented exception to Principle #8
 * (separate non-settings surface). Two-button grid (decline + accept)
 * with a fixed cell width so Allow doesn't render narrower than
 * Only essentials. Container query on .cn-body stacks the row when the
 * bar is genuinely too narrow to fit both horizontally. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  container-type: inline-size;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 112px;
  justify-content: end;
  gap: 0.5em;
  align-items: stretch;
}
@container (max-width: 231px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
    grid-auto-flow: row;
  }
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons button.cm-btn,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok button.cm-btn {
  white-space: nowrap;
  line-height: 1.25;
  min-height: 2.4em;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.55em 0.85em;
  border: 1px solid transparent;
  text-align: center;
  width: 100%;
  min-width: 0;
  margin-right: 0;
}
@media (pointer: coarse), (max-width: 600px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons button.cm-btn,
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok button.cm-btn {
    min-height: 44px;
  }
}

/* 23: Accept and Decline at equal visual weight, both in the brass theme. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons button.cm-btn.cm-btn-success,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok button.cm-btn.cm-btn-success {
  background-color: var(--brass, #b8893a);
  border-color: var(--brass, #b8893a);
  color: #ffffff;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons button.cm-btn.cm-btn-success:hover,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok button.cm-btn.cm-btn-success:hover {
  background-color: #a37730;
  border-color: #a37730;
}

/* Klaro renders the decline button in the bottom bar with the class chain
 * `cm-btn cm-btn-danger cn-decline` (NO `cm-btn-decline` — that variant only
 * appears in the full settings modal). Target `.cn-decline` to catch both
 * render paths reliably. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons button.cm-btn.cn-decline,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok button.cm-btn.cn-decline {
  background-color: #ffffff;
  border-color: var(--brass, #b8893a);
  color: var(--ink, #15161a);
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons button.cm-btn.cn-decline:hover,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok button.cm-btn.cn-decline:hover {
  background-color: #f5ecdb;
  border-color: var(--brass, #b8893a);
  color: var(--ink, #15161a);
}

/* Focus ring for keyboard users — visible on both light and dark backgrounds. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons button.cm-btn:focus-visible,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok button.cm-btn:focus-visible {
  outline: 2px solid var(--brass, #b8893a);
  outline-offset: 2px;
}

/* Learn-more link styling: brass underline on dark ink, matches the docs
 * link treatment elsewhere. The bar background is white in production
 * (zimun.css redefines `--dark1` to `#ffffff`), so the link text must be
 * dark — not white — to remain readable. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body a.cn-learn-more,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body a.cm-link {
  color: var(--ink, #15161a);
  border-bottom: 1px solid var(--brass, #b8893a);
  text-decoration: none;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body a.cn-learn-more:hover,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body a.cm-link:hover {
  color: var(--brass, #b8893a);
}