/* nothing-before-consent 2.3.0 — the banner's style.
 *
 * https://github.com/marco-fabbri/nothing-before-consent
 *
 * Deliberately neutral: the colours come from CSS variables, so every site tunes it to its own
 * appearance without touching this file. On a site copied pixel by pixel, a banner that clashes is
 * more noticeable than one that is missing.
 *
 * To set per site:
 *   :root { --ck-primary: #29a9e0; --ck-primary-text: #fff; }
 *
 * Sizes in px and not in rem, on purpose: rem is measured against the host site's font, and there
 * are widespread themes (the whole Casper/Ghost family) that set `html { font-size: 62.5% }` so
 * they can write 1.5rem instead of 15px. On those sites every rem would be 10px and the panel would
 * shrink by 37.5% without anyone asking. A banner must be the same size everywhere: it is not the
 * site's content, it is an interface resting on top of it.
 *
 * The media queries stay in `em` because there the unit is measured against the browser's default
 * font and not the site's root: they were already immune, and they follow anyone who has enlarged
 * their type.
 */

:root {
  --ck-backdrop: rgba(15, 23, 42, .55);
  --ck-surface: #fff;
  --ck-text: #1f2937;
  --ck-text-muted: #4b5563;
  --ck-border: #e5e7eb;
  /* The panel's own outline, distinct from --ck-border, which separates the categories inside it.
     A banner sits on a page whose colour it does not know, so the default has to hold against a
     white page (4.8:1) and a near-black one (3.7:1), clearing the 3:1 that WCAG 1.4.11 asks for the
     boundary of a user interface component. Override it per site if the page is neither. */
  --ck-panel-border: #6b7280;
  /* The outline of a control inside the panel — today the tertiary buttons. Same job as
     --ck-panel-border one scale down, and the same value for the same reason: it has to clear 3:1
     against the surface in both themes. It cannot be --ck-border, which separates the categories:
     a rule between two rows of text and the edge of a button you are meant to find and press are
     different things, and the second one is a user interface component under WCAG 1.4.11. */
  --ck-control-border: #6b7280;
  --ck-primary: #2563eb;
  --ck-primary-text: #fff;
  /* The link's colour, apart from --ck-primary. They begin the same, and they are not the same
     thing: --ck-primary is a background with --ck-primary-text on top of it, so it is legible by
     construction whatever the page does, while the link is text sitting straight on --ck-surface
     and has to clear 4.5:1 against it. Lightening --ck-primary to fix the link would take the
     buttons' own white text down to 2.5:1 — a worse fault than the one being fixed. Hence two. */
  --ck-link: var(--ck-primary);
  --ck-radius: 10px;
}

.ck-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* above third-party widgets, which sit high of their own accord */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: var(--ck-backdrop);
}

@media (min-width: 40em) {
  .ck-pos-modal { align-items: center; }
}

/* The non-modal variants neither dim nor swallow clicks: `inset` is released where it matters and
   the backdrop turns transparent, so the page stays readable and usable. */
.ck-pos-bottom,
.ck-pos-top,
.ck-pos-corner {
  background: none;
  pointer-events: none; /* the container lets clicks through… */
}

.ck-pos-bottom .ck-box,
.ck-pos-top .ck-box,
.ck-pos-corner .ck-box {
  pointer-events: auto; /* …the panel does not, or it would not be clickable */
  /* The outline is what tells the visitor where the page ends and the banner begins. The shadow
     below cannot do it: on a dark page it is black on black, and on a light one it is too soft to
     read on a phone. Only the non-modal variants need it — the modal one dims the page instead. */
  border: 1px solid var(--ck-panel-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
}

.ck-pos-bottom { inset: auto 0 0 0; align-items: flex-end; }
.ck-pos-top { inset: 0 0 auto 0; align-items: flex-start; }

/* On an iPhone the bottom of the panel ends up under Safari's floating toolbar. env() is 0 where
   there is no inset, so nothing moves on a desktop. */
.ck-pos-bottom .ck-box { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

.ck-pos-bottom .ck-box,
.ck-pos-top .ck-box { max-width: 832px; }

.ck-pos-corner { inset: auto 0 0 auto; justify-content: flex-end; align-items: flex-end; }
.ck-pos-corner .ck-box { max-width: 384px; }

/* Below 40em the corner makes no sense: the screen is narrow already, and the panel becomes a bar. */
@media (max-width: 40em) {
  .ck-pos-corner { inset: auto 0 0 0; justify-content: center; }
  .ck-pos-corner .ck-box { max-width: none; }

  /* Edge to edge, square corners. A floating card with faint edges reads as a block of text inside
     the article; a bar that touches both sides reads as chrome, which is what it is. */
  .ck-pos-bottom,
  .ck-pos-top,
  .ck-pos-corner { padding: 0; }

  .ck-pos-bottom .ck-box,
  .ck-pos-top .ck-box,
  .ck-pos-corner .ck-box { border-radius: 0; border-left: 0; border-right: 0; }

  /* Only the edge facing the page carries the line: the opposite one is off-screen. */
  .ck-pos-bottom .ck-box,
  .ck-pos-corner .ck-box { border-bottom: 0; }
  .ck-pos-top .ck-box { border-top: 0; }
}

.ck-box {
  /* The outline must not add to the width, and the host page cannot be assumed to set this. */
  box-sizing: border-box;
  width: 100%;
  max-width: 544px;
  max-height: calc(100vh - 32px);
  /* On a phone 100vh is the viewport with the browser's bars hidden, so a panel with the detail
     unfolded could run under them. dvh is the viewport as it actually is; the line above is the
     fallback for a browser that does not know it. */
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px;
  border-radius: var(--ck-radius);
  background: var(--ck-surface);
  color: var(--ck-text);
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

/* The panel takes the focus when it opens, so that no button is the default answer. It is not a
   control, so it draws no ring: the ring is for the thing you are about to press. */
.ck-box:focus { outline: none; }

/* `hidden` is what folds the detail and the save button away, and the browser's own rule for it
   loses to any author rule that sets `display` on a div or a button — which a theme may well do,
   with no idea this panel exists. Said here, with the weight to win. */
.ck-box [hidden] { display: none !important; }

.ck-box h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
.ck-text { margin: 0 0 12px; color: var(--ck-text-muted); }
/* Underlined on purpose: a host theme that strips underlines from links (Casper does) would leave
   the policy link told apart by colour alone, which WCAG 1.4.1 says is not telling it apart. */
.ck-link { display: inline-block; margin-bottom: 12px; color: var(--ck-link); text-decoration: underline; }

.ck-details { margin: 8px 0 16px; border-top: 1px solid var(--ck-border); }
.ck-category { display: flex; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--ck-border); }
/* `appearance: auto` puts back the native checkbox where a theme has removed it to draw its own
   (and drew nothing for a checkbox it did not know about); `accent-color` paints it in the site's
   colour rather than the browser's blue. The attribute in the selector is for specificity: the
   theme's rule is `input[type=checkbox]`, and a rule that ties with it loses by coming first. */
.ck-category input[type="checkbox"] { margin-top: 4px; width: 17px; height: 17px; flex: none; -webkit-appearance: auto; appearance: auto; accent-color: var(--ck-primary); }
.ck-category label { display: block; cursor: pointer; }
.ck-category input:disabled + label { cursor: default; }
.ck-category label span { display: block; margin-top: 2px; color: var(--ck-text-muted); font-size: .9em; }
.ck-category label em { color: var(--ck-text-muted); font-size: .85em; font-style: normal; }

.ck-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.ck-btn {
  flex: 1 1 auto;
  min-width: 128px;
  min-height: 44px; /* a comfortable target on a phone, where the banner is read crouching */
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: calc(var(--ck-radius) - 4px);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Accept and Reject share one style: if refusing cost more effort than accepting, the consent
   would not be free, and it is the most frequent objection to home-made banners. */
.ck-btn-primary { background: var(--ck-primary); color: var(--ck-primary-text); }
.ck-btn-primary:hover { filter: brightness(1.08); }
.ck-btn-tertiary { background: transparent; color: var(--ck-text); border-color: var(--ck-control-border); }
.ck-btn-tertiary:hover { background: #f9fafb; }
.ck-btn:focus-visible { outline: 3px solid var(--ck-primary); outline-offset: 2px; }

/* A placeholder in place of a blocked iframe: without one there would be a mute hole in the page
   and nobody would know a map had been there. */
.ck-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 192px;
  padding: 24px;
  border: 1px dashed var(--ck-border);
  border-radius: var(--ck-radius);
  background: #f9fafb;
  color: var(--ck-text-muted);
  text-align: center;
}

.ck-placeholder p { margin: 0; }
.ck-placeholder .ck-btn { flex: 0 0 auto; }

@media (prefers-color-scheme: dark) {
  :root {
    --ck-surface: #111827;
    --ck-text: #f3f4f6;
    --ck-text-muted: #9ca3af;
    --ck-border: #374151;
    /* On #111827 the light-mode link is 3.43:1, under the 4.5:1 that body text owes. This one is
       6.98:1. It is the one place a site's own --ck-primary is overruled, and the trade is stated
       rather than hidden: a brand colour that cannot be read is not carrying the brand. A site that
       wants its own here sets --ck-link inside its own dark block. */
    --ck-link: #60a5fa;
  }
  .ck-btn-tertiary:hover { background: #1f2937; }
  .ck-placeholder { background: #0b1220; }
}

@media (prefers-reduced-motion: no-preference) {
  .ck-box { animation: ck-enter .18s ease-out; }
  @keyframes ck-enter { from { transform: translateY(8px); opacity: 0; } }
}