/**
 * Consent banner and manager (Klaro).
 *
 * Klaro exposes two generations of custom properties: the original
 * --green1/--dark1 family that its own stylesheet reads, and a newer --klaro-*
 * family emitted by the module's "override CSS" layer, which wins on
 * specificity. Both are mapped here onto the design system's tokens.
 *
 * The properties are declared on `.klaro` itself rather than the `#klaro`
 * wrapper: Klaro declares them on `.klaro` too, and a value set directly on an
 * element always beats one inherited from its parent.
 */

#klaro .klaro,
.klaro.klaro-theme-mirzoyan {
  /* ---- Original family: grounds, text, switches --------------------- */
  --dark1: var(--c-slate-900);   /* notice and modal ground */
  --dark2: #33465C;              /* borders, dividers */
  --dark3: #93A7B8;              /* muted descriptions */
  --light1: #F2F6F9;             /* body text on the dark ground */
  --light2: #3C5064;
  --light3: var(--c-slate-300);
  --white2: #4A5F74;             /* switch track */
  --white3: #C7D4DE;             /* switch knob */
  --green1: var(--c-gold);
  --green2: #FFE470;
  --green3: var(--c-gold-600);
  --blue1: var(--c-slate-500);
  --blue2: var(--c-slate-300);

  /* ---- Override family: buttons, links, focus ----------------------- */
  --klaro-primary-color: var(--c-gold);
  --klaro-button-bg: var(--c-gold);
  --klaro-button-text-color: var(--c-slate-900);
  --klaro-button-border: 1px solid var(--c-gold);
  --klaro-button-bg-hover: #FFE470;
  --klaro-button-text-color-hover: var(--c-slate-900);
  --klaro-button-border-hover: 1px solid #FFE470;
  --klaro-button-border-radius: var(--radius-pill);
  --klaro-button-padding: 0.85rem 1.5rem;
  --klaro-button-font-size: var(--fs-sm);
  --klaro-button-font-weight: 700;
  --klaro-button-line-height: 1;
  --klaro-button-box-shadow: none;
  --klaro-button-focus-outline: 2px solid var(--c-gold);
  --klaro-button-focus-outline-offset: 2px;
  --klaro-link-color: var(--c-slate-200);
  --klaro-link-color-hover: #FFFFFF;
  --klaro-link-decoration-line: underline;
  --klaro-slider-bg: #4A5F74;
  --klaro-slider-bg-active: var(--c-gold);
  --klaro-slider-bg-required: var(--c-slate-400);

  /* ---- Type and shape ----------------------------------------------- */
  --font-family: var(--font-body);
  --title-font-family: var(--font-display);
  --font-size: 0.9375rem;
  --border-radius: var(--radius-md);

  /* A full-width bar rather than Klaro's 400px corner card: this is a
     consent decision, not a notification. */
  --notice-position: fixed;
  --notice-max-width: none;
  --notice-left: 0;
  --notice-right: 0;
  --notice-bottom: 0;
}

/* ---- Notice ------------------------------------------------------------ */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  border-radius: 0;
  border-top: 2px solid var(--c-gold);
  box-shadow: 0 -10px 40px -14px rgb(15 22 30 / 0.55);
}

/* Line the notice up with the page rather than spanning edge to edge. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s-5) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-7);
}

.klaro .cookie-notice .cn-body #id-cookie-title {
  flex: 1 1 100%;
  font-family: var(--font-display);
  font-weight: 600;
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin: 0;
}
.klaro .cookie-notice .cn-body #id-cookie-notice {
  flex: 1 1 26rem;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-slate-200);
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
  flex: 0 0 auto;
  margin: 0;
  gap: var(--s-4);
  align-items: center;
  justify-content: flex-end;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
  display: flex;
  gap: var(--s-3);
  margin: 0;
}

/* ---- Buttons ------------------------------------------------------------
 * Accept and decline carry identical weight — same size, same solidity — so
 * refusing is exactly as easy as accepting (CNIL, 2020). Only hue separates
 * them. The selectors match the override layer's specificity and come later
 * in the cascade, which is what lets them through.
 */
.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn {
  margin: 0;
  letter-spacing: 0.02em;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn.cm-btn-decline,
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-btn.cm-btn-decline {
  background-color: #33465C;
  border-color: #33465C;
  color: #FFFFFF;
  opacity: 1;
}
.klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
.klaro .cookie-notice .cm-btn.cm-btn-decline:hover,
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
.klaro .cookie-modal .cm-btn.cm-btn-decline:hover {
  background-color: #445B75;
  border-color: #445B75;
  color: #FFFFFF;
}

.klaro .cookie-notice .cm-btn.cm-btn-close,
.klaro .cookie-modal .cm-btn.cm-btn-close {
  background-color: #33465C;
  border-color: #33465C;
  color: #FFFFFF;
}

.klaro .cookie-notice a.cm-link.cn-learn-more,
.klaro .cookie-modal a.cm-link {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-slate-200);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.klaro .cookie-notice a.cm-link.cn-learn-more:hover,
.klaro .cookie-modal a.cm-link:hover { color: #FFFFFF; }

/* ---- Manager modal ----------------------------------------------------- */
.klaro .cookie-modal .cm-modal .cm-header h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-weight: 400;
  font-size: var(--fs-xl);
}
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose { padding-block: var(--s-2); }
.klaro .cookie-modal .cm-modal a { color: var(--c-gold); }

/* ---- Small screens ----------------------------------------------------- */
@media (max-width: 47.99em) {
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: stretch;
  }
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons { flex: 1 1 100%; }
  .klaro .cookie-notice .cm-btn { flex: 1 1 0; text-align: center; }
}