/*
 * Cookie banner and preferences panel. Uses the site's DM Sans and its look
 * (black buttons, square-ish corners, the dark-blue accent for links).
 *
 * --launcher-reserve is the space kept clear in the bottom-right corner for the
 * Nicole launcher (the "Ask Nicole AI" pill, 38px high, 24px from the bottom, plus a gap). The
 * banner and panel sit at the bottom-left on tablets and desktops, narrow enough to stop short of the launcher, and above this reserve on phones; the native
 * Nicole launcher (and any other fixed corner widget) reads the same property.
 */
:root {
  --launcher-reserve: 100px;
  --consent-bg: #ffffff;
  --consent-text: #000000;
  --consent-muted: #4a4a4a;
  --consent-primary-bg: #000000;
  --consent-primary-text: #ffffff;
  --consent-link: #00104a;
  --consent-outline: #000000;
  --consent-focus: #00104a;
}

.consent-banner, .consent-panel {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  /* Never wider than the space left of the launcher pill (up to about 200px with a long label, plus its 23px edge and a 16px gap each side). */
  width: min(440px, calc(100vw - 255px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 1.25rem 1.4rem;
  background: var(--consent-bg);
  color: var(--consent-text);
  font-family: var(--font, "DM Sans", system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  border: 1px solid #d0d0d6;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  animation: consent-in 0.2s ease-out;
}
@keyframes consent-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .consent-banner, .consent-panel { animation: none; } }

.consent-text, .consent-group p, .consent-policy { margin: 0 0 1rem; }
.consent-group p { margin: 0.2rem 0 0 1.9rem; color: var(--consent-muted); font-size: 14px; }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

.consent-btn {
  padding: 0.7rem 1.1rem;
  border: 2px solid var(--consent-outline);
  border-radius: 4px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.consent-btn--primary { background: var(--consent-primary-bg); color: var(--consent-primary-text); }
.consent-btn--outline { background: transparent; color: var(--consent-text); }
.consent-link, .footer-cookie-link {
  padding: 0.4rem 0.2rem;
  border: 0;
  background: none;
  color: var(--consent-link);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.footer-cookie-link { padding: 0; color: inherit; }
.consent-btn:focus-visible, .consent-link:focus-visible, .footer-cookie-link:focus-visible,
.consent-close:focus-visible, .consent-group input:focus-visible, .consent-policy a:focus-visible,
.consent-panel h2:focus-visible {
  outline: 3px solid var(--consent-focus);
  outline-offset: 2px;
}

.consent-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.consent-panel h2 { margin: 0; font-size: 20px; line-height: 1.3; }
.consent-close { border: 0; background: none; color: var(--consent-text); font-size: 28px; line-height: 1; cursor: pointer; padding: 0 0.3rem; }
.consent-group { margin-bottom: 0.9rem; }
.consent-group-label { display: flex; align-items: center; gap: 0.7rem; font-weight: 600; }
.consent-group input { width: 1.2rem; height: 1.2rem; accent-color: var(--consent-primary-bg); }
.consent-policy a { color: var(--consent-link); }
body.consent-panel-open .consent-banner { display: none; }
/* While Nicole's chat window is open the banner steps aside, at every width, and returns when it closes: the 380px window reaches
   far enough left to cover a bottom-left banner on tablets as well as phones. */
body:has(.nicole-window.nicole-open) .consent-banner { display: none; }

/* Phones: a full-width bar, still above the launcher's reserved space. */
@media (max-width: 600px) {
  .consent-banner, .consent-panel {
    left: 0;
    right: 0;
    bottom: var(--launcher-reserve);
    width: auto;
    max-height: calc(100dvh - var(--launcher-reserve) - 16px);
    border-radius: 0;
    border-width: 1px 0 0;
    padding: 1rem var(--gutter, 4vw);
  }
}

/* The button that reopens the cookie settings on a full page: a small white tab fixed at the bottom left, as on the live site. The banner and the panel (higher z-index) cover it while they are open; it stays in the page's tab order so the settings can be reached by keyboard. */
.footer-cookie-pill[hidden] { display: none; }
.footer-cookie-pill { position: fixed; left: var(--gutter, 4vw); bottom: 0; z-index: 10; background: #fff; border-radius: 4px 4px 0 0; }
.footer-cookie-pill .footer-cookie-link { display: block; padding: 6px 10px; font-size: 12px; line-height: 18px; color: #000; text-decoration: none; }