/* ──────────────────────────────────────────────────────────────────
   consent.css — cosmetics only.
   ----------------------------------------------------------------
   The rule that decides VISIBILITY is not here: it is inlined in the
   head by ScriptBuilder::criticalCss. If it lived in this file, every
   returning visitor would see the banner for as long as this stylesheet
   took to arrive — a flash plus a layout shift on every page load.

   ── SIZING: em, NOT rem ──────────────────────────────────────────
   omnalingo.css sets `html { font-size: 62.5% }` so that 1rem = 10px.
   A rem-based component therefore renders at 62.5% on this site — the
   banner looked "scaled down", because it was.

   A plugin cannot know the host's root size, so it must not depend on
   it. The component takes ONE anchor and everything inside is `em`:

       font-size: var(--om-cc-base, max(16px, 1rem))

   The fallback is for a site that has never heard of this plugin: 16px
   on a 62.5% host, 16px on a normal one. But note what it CANNOT do —
   on a 62.5% host a user who raises their browser default to 20px gets
   1rem = 12.5px, so max() stays pinned at 16px and nothing responds
   until their default exceeds 25.6px. The earlier version of this
   comment claimed it scaled with the user's preference; on the very
   site it was written for, it did not.

   So the host sets --om-cc-base in its own stylesheet (omnalingo.css
   uses 1.6rem = 16px today), which tracks the root and therefore tracks
   the user's default properly. Page zoom worked either way; this is
   about the browser font-size preference specifically.

   Media queries stay in px for the same reason — `em` in a media query
   resolves against the ROOT, so `30em` would mean 300px here and 480px
   elsewhere.

   Every custom property falls back, so the plugin looks right on a site
   that has never heard of the Omnalingo design system while inheriting
   its palette on one that has.
   ────────────────────────────────────────────────────────────────── */

.omna-cc {
  --cc-bg:      var(--om-color-surface, #fff);
  --cc-fg:      var(--om-color-text, #1a1a1a);
  --cc-muted:   var(--om-color-text-muted, #4a4a55);
  --cc-accent:  var(--om-color-primary, #1a1a1a);
  --cc-on-accent: var(--om-color-on-primary, #fff);
  --cc-border:  var(--om-color-border, #e2e2e8);
  --cc-radius:  var(--om-radius-md, 8px);
  --cc-shadow:  0 8px 32px rgba(0, 0, 0, .16);

  /* The one anchor. Everything below is em, relative to this. The host can
     override it to something root-relative so it tracks a user who has
     raised their browser default — see the note at the top of this file. */
  font-size: var(--om-cc-base, max(16px, 1rem));
  font-family: var(--om-font-body, inherit);
  color: var(--cc-fg);
  line-height: 1.6;
}

/* ── banner ─────────────────────────────────────────────────────── */

.omna-cc__banner {
  position: fixed;
  z-index: 99999;
  /* Bottom CENTRE. inset-inline:0 plus auto margins is what centres a
     fixed element without a transform — and without a transform it does
     not create a containing block that would trap the modal's own
     fixed positioning. */
  inset-block-end: 1.25em;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: min(30em, calc(100vw - 2.5em));
  padding: 1.5em;
  background: var(--cc-bg);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
}

.omna-cc__title {
  margin: 0 0 .5em;
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1.3;
}

.omna-cc__body {
  margin: 0 0 1.125em;
  font-size: .875em;
  color: var(--cc-muted);
}

/* ── buttons ────────────────────────────────────────────────────── */

.omna-cc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
}

/*
 * Reject and Accept are the SAME button. Same class, same padding, same
 * weight, same colour.
 *
 * This is the single most-enforced rule in consent UI, and the usual way
 * to fail it is styling reject as a ghost so accept reads as the default.
 * Only Customise is a ghost here, because it is not a consent decision —
 * it opens a dialog. If a future redesign makes reject quieter than
 * accept, it stops being valid consent.
 */
.omna-cc__btn {
  flex: 1 1 auto;
  padding: .625em 1em;
  font: inherit;
  font-size: .875em;
  font-weight: 600;
  color: var(--cc-on-accent);
  background: var(--cc-accent);
  border: 1px solid var(--cc-accent);
  border-radius: var(--om-radius-sm, 4px);
  cursor: pointer;
  transition: opacity .15s ease;
      text-align: center;
}

.omna-cc__btn:hover { opacity: .88; }

.omna-cc__btn:focus-visible {
  outline: 2px solid var(--cc-fg);
  outline-offset: 2px;
}

.omna-cc__btn--ghost {
  color: var(--cc-accent);
  background: transparent;
}

.omna-cc__privacy {
  display: inline-block;
  margin-block-start: .875em;
  font-size: .8125em;
  color: var(--cc-muted);
}

/* ── modal ──────────────────────────────────────────────────────── */

.omna-cc__scrim {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25em;
  background: rgba(0, 0, 0, .5);
}

.omna-cc__scrim[hidden] { display: none; }

.omna-cc__modal {
  inline-size: min(38em, 100%);
  max-block-size: min(85vh, 44em);
  overflow-y: auto;
  padding: 1.75em;
  background: var(--cc-bg);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
}

.omna-cc__modal:focus { outline: none; }

.omna-cc__modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
}

.omna-cc__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 2em;
  block-size: 2em;
  color: var(--cc-muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.omna-cc__close:hover { background: var(--cc-border); }

.omna-cc__close:focus-visible {
  outline: 2px solid var(--cc-fg);
  outline-offset: 2px;
}

/* ── category rows ──────────────────────────────────────────────── */

.omna-cc__list {
  margin: 0 0 1.25em;
  padding: 0;
  list-style: none;
}

.omna-cc__row {
  padding-block: 1em;
  border-block-start: 1px solid var(--cc-border);
}

.omna-cc__row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.omna-cc__toggle {
  display: flex;
  align-items: center;
  gap: .75em;
  cursor: pointer;
}

.omna-cc__label { font-weight: 600; }

.omna-cc__desc {
  margin: .5em 0 0;
  font-size: .8125em;
  color: var(--cc-muted);
}

.omna-cc__always {
  font-size: .75em;
  font-weight: 600;
  color: var(--cc-muted);
  white-space: nowrap;
}

/*
 * The checkbox is a REAL <input type="checkbox">, moved off-screen rather
 * than display:none — a hidden input is removed from the accessibility
 * tree and cannot be focused, which would make the toggles unusable by
 * keyboard and invisible to screen readers. It stays focusable; the
 * adjacent span is what you see, and it shows the focus ring.
 */
.omna-cc__toggle input {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.omna-cc__switch {
  position: relative;
  flex: 0 0 auto;
  inline-size: 2.25em;
  block-size: 1.25em;
  background: var(--cc-border);
  border-radius: 1em;
  transition: background .15s ease;
}

.omna-cc__switch::after {
  content: "";
  position: absolute;
  inset-block-start: .1875em;
  inset-inline-start: .1875em;
  inline-size: .875em;
  block-size: .875em;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s ease;
}

.omna-cc__toggle input:checked + .omna-cc__switch { background: var(--cc-accent); }
.omna-cc__toggle input:checked + .omna-cc__switch::after { transform: translateX(1em); }

.omna-cc__toggle input:focus-visible + .omna-cc__switch {
  outline: 2px solid var(--cc-fg);
  outline-offset: 2px;
}

/* Required categories: visibly on, visibly not yours to change. */
.omna-cc__toggle input:disabled + .omna-cc__switch { opacity: .55; }
.omna-cc__toggle:has(input:disabled) { cursor: default; }

/* ── small screens ──────────────────────────────────────────────── */

/* px, not em: a media query resolves em against the ROOT, which on this
   site is 10px — `30em` would mean 300px here and 480px elsewhere. */
@media (max-width: 480px) {
  .omna-cc__banner {
    inset-inline: .75em;
    inset-block-end: .75em;
    margin-inline: 0;
    inline-size: auto;
    padding: 1.25em;
  }

  /*
   * Stacked. Accept lands on top because it is FIRST IN THE MARKUP, not
   * because CSS moved it.
   *
   * There is deliberately no `order` here. The previous version reordered
   * items visually while the DOM kept a different sequence, so a sighted
   * keyboard user's focus ring jumped bottom → middle → top (WCAG 2.4.3)
   * — and because the rules were scoped to .omna-cc__actions they also
   * applied to the modal's action row, which carries the same class,
   * scrambling its buttons into Save / Accept / Reject.
   *
   * CSS cannot reorder the DOM per breakpoint, so any per-breakpoint
   * visual order guarantees a mismatch somewhere. One order everywhere is
   * the only version that is correct at every width.
   */
  /* column-REVERSE: the markup reads Customise → Reject → Accept for desktop,
     so reversing the stack puts Accept on top here without touching item
     order. Scoped to the banner so the modal's own action row keeps its
     natural sequence. */
  .omna-cc__banner .omna-cc__actions { flex-direction: column-reverse; }
  .omna-cc__actions { flex-direction: column; }
  .omna-cc__btn { flex-basis: auto; inline-size: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .omna-cc__btn,
  .omna-cc__switch,
  .omna-cc__switch::after { transition: none; }
}

/* ── withdrawal trigger ─────────────────────────────────────────── */

/*
 * Rendered as a <button> because it performs an action rather than
 * navigating — but styled as a link, because that is what people expect a
 * "Cookie settings" item in a footer to look like. The element type is for
 * screen readers and keyboards; the styling is for everyone else.
 *
 * Outside .omna-cc, so these are the only rules here that apply to markup
 * the plugin does not own. `font: inherit` keeps it in whatever the
 * surrounding footer uses.
 */
.omna-cookie-settings {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

.omna-cookie-settings:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* The self-retiring fallback: only visible when the site has placed no
   trigger of its own. Deliberately quiet — a safety net, not a design
   element. */
.omna-cc-fallback {
  /* Sets its own base and sizes in em from there. rem here resolved against
     the host's 62.5% root and rendered at 10/12.5/15px — the same scaling bug
     the rest of this file was rewritten to remove, left behind because this
     rule sits outside .omna-cc. */
  font-size: var(--om-cc-base, max(13px, 1rem));
  padding: 1em 1.25em 1.5em;
  text-align: center;
  opacity: .7;
}

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

/* Visually hidden, but present for assistive tech — the saved-confirmation
   live region. Not display:none, which would remove it from the a11y tree
   and defeat the entire purpose. */
.omna-cc__status {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The legitimate-interest / objection note. Quieter than the category
   descriptions — it explains something that is NOT a choice on this
   screen, and styling it like the toggles would imply it is. */
.omna-cc__note {
  margin: 0 0 1em;
  padding-block-start: 1em;
  border-block-start: 1px solid var(--cc-border);
  font-size: .8125em;
  color: var(--cc-muted);
}