/*!
 * cookie-consent.css -- styling for the consent banner and preferences modal.
 *
 * Only the things Tailwind utilities cannot express cleanly live here:
 * the toggle switch (which needs a ::before knob), the iPhone safe-area inset
 * so the banner is not flush against the home indicator, scroll locking, and
 * the scrollbar gutter that stops the page jumping sideways when the modal
 * opens.
 *
 * Everything else is Tailwind classes in the template, so the component keeps
 * the same visual language as the rest of the site.
 */

/* ------------------------------------------------------------------ *
 * Toggle switch
 *
 * An <input type="checkbox"> with appearance:none. The knob is a ::before
 * pseudo-element that translates across the track when checked. Using a real
 * checkbox means keyboard support, focus handling and the disabled state all
 * come from the platform rather than being re-implemented.
 * ------------------------------------------------------------------ */
.cb-switch {
  /* Essential. Without appearance:none the browser draws its own checkbox,
     which ignores border-radius and background-color entirely and silently
     defeats the whole switch below. -webkit- prefixed for older Safari. */
  -webkit-appearance: none;
  appearance: none;
  /* The native margin would stop the switch sitting flush in the flex row. */
  margin: 0;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 9999px;
  background-color: #cbd5e1; /* slate-300, off */
  transition: background-color 0.18s ease;
}

.cb-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;  /* 20px knob inside a 44px track */
  height: 1.25rem;
  border-radius: 9999px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
  transition: transform 0.18s ease;
}

.cb-switch:checked {
  background-color: #059669; /* brand-600, on */
}

.cb-switch:checked::before {
  transform: translateX(1.25rem);
}

/* Focus ring. :focus-visible so a mouse click does not leave a ring behind. */
.cb-switch:focus-visible {
  outline: 2px solid #10b981; /* brand-500 */
  outline-offset: 2px;
}

/* The essential switch is locked. Keep it obviously non-interactive. */
.cb-switch:disabled {
  cursor: not-allowed;
  background-color: #cbd5e1;
  opacity: 0.6;
}

.cb-switch:disabled::before {
  transform: none;
}

.cb-switch:disabled:checked::before {
  transform: translateX(1.25rem);
}

/* ------------------------------------------------------------------ *
 * Banner
 * ------------------------------------------------------------------ */
.cb-banner {
  /* Respect the iPhone home indicator so the buttons stay tappable. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Avoid the layout shift of the scrollbar-gutter rule below. */
  animation: cb-slide-up 0.25s ease-out;
}

@keyframes cb-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Respect a visitor who has asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  .cb-banner {
    animation: none;
  }
  .cb-switch,
  .cb-switch::before {
    transition: none;
  }
}

/* ------------------------------------------------------------------ *
 * Modal
 * ------------------------------------------------------------------ */
.cb-modal-panel {
  /* Never taller than the viewport, and never clipped by the address bar. */
  max-height: 92vh;
  max-height: 92dvh;
}

.cb-modal-body {
  /* Keeps momentum scrolling working inside the panel on iOS. */
  -webkit-overflow-scrolling: touch;
}

/* Stop the page behind the modal from scrolling, without the layout shifting
 * sideways as the scrollbar disappears. */
body.cb-modal-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* Anchor scroll-margins so a heading focused inside the panel is not hidden
 * underneath the sticky panel header. */
.cb-modal-body h3 {
  scroll-margin-top: 1rem;
}

/* ------------------------------------------------------------------ *
 * Print
 *
 * A consent banner on a printed page is noise. The consent record itself is
 * unaffected -- it lives in a cookie.
 * ------------------------------------------------------------------ */
@media print {
  #cb-consent-banner,
  #cb-consent-modal {
    display: none !important;
  }
}