/*!
 * MARS Consent — styles.
 * v1.0.0 · 2026-08-26 · MARS Digital LLC
 *
 * Brand values are hard-coded rather than pulled from each site's variables,
 * because the three target sites name their tokens differently and a consent
 * banner that inherits a missing variable fails open — invisible text over an
 * invisible tray. Self-contained is the safer failure mode here.
 *
 * Accessibility notes, since they are the point of several of these rules:
 *   - Every control clears 44x44 CSS px of hit area (WCAG 2.5.8 / 2.5.5).
 *   - Focus is a 2px Orbit Orange ring with a 2px offset, visible on both the
 *     violet tray and the plum page. Never `outline: none` without a
 *     replacement.
 *   - Body copy is Lavender Mist on the violet-washed plum tray, which clears
 *     AA. Neutral Grey was tried and failed against the lighter tray — it was
 *     tuned against the darker page background.
 *   - prefers-reduced-motion removes the slide-up entirely rather than
 *     shortening it.
 */

.mars-consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 2147483000; /* above sticky nav and any late-loading widget */
  background-color: rgba(16, 4, 30, 0.98);
  background-image: linear-gradient(180deg, rgba(72, 19, 132, 0.38) 0%, rgba(72, 19, 132, 0.14) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 -24px 60px -12px rgba(0, 0, 0, 0.75);
  color: #FFFFFF;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: mars-consent-in 220ms ease-out;
}

@keyframes mars-consent-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mars-consent { animation: none; }
}

/* The MARS gradient rule — the same device that opens every page and every
   email. It is what separates this from being one more card in the layout. */
.mars-consent__rule {
  height: 3px;
  background: linear-gradient(90deg, #481384 0%, #AE1C6C 33%, #E11D1D 66%, #FB7439 100%);
}

.mars-consent__inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 20px 24px 22px;
}

.mars-consent__kicker {
  font-family: 'Orbitron', 'Bahnschrift Condensed', 'Eurostile', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FB7439;
  margin: 0 0 8px;
}

.mars-consent__body {
  font-size: 13px;
  line-height: 1.65;
  color: #EAE0F6;
  max-width: 68ch;
  margin: 0;
}

.mars-consent__link {
  color: #FB7439;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mars-consent__link:hover { color: #FFFFFF; }
.mars-consent__link--quiet {
  color: rgba(234, 224, 246, 0.7);
  font-size: 13px;
  /* Matches the buttons' hit area so it is not the one control that is hard
     to hit on a phone. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.mars-consent__link--quiet:hover { color: #FFFFFF; }

/* ------------------------------------------------------------------ rows */

.mars-consent__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 60rem;
  margin: 0 0 4px;
}

.mars-consent__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  /* Padding rather than height so the label text wraps naturally on narrow
     screens while the target stays large. */
  padding: 6px 0;
}
.mars-consent__row.is-locked { cursor: default; }

.mars-consent__check {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: #FB7439;
}
.mars-consent__check:disabled { opacity: 0.5; }

.mars-consent__rowtext { display: block; }

.mars-consent__rowlabel {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
}

.mars-consent__rownote {
  display: block;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(234, 224, 246, 0.72);
  margin-top: 2px;
}

/* --------------------------------------------------------------- actions */

.mars-consent__actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.mars-consent__btn {
  font-family: 'Orbitron', 'Bahnschrift Condensed', 'Eurostile', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 22px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

/* Accept and Reject are the same element with a different skin: same font,
   same size, same padding, same row. The only difference is fill versus
   outline, which is a visual hierarchy the law permits and a size or position
   difference is not. */
.mars-consent__btn--primary {
  background: #FB7439;
  color: #10041E; /* white on orange fails AA — plum is the brand-correct fix */
}
.mars-consent__btn--primary:hover { background: #FF8B57; }

.mars-consent__btn--secondary {
  background: transparent;
  border-color: rgba(234, 224, 246, 0.45);
  color: #EAE0F6;
}
.mars-consent__btn--secondary:hover {
  background: rgba(234, 224, 246, 0.1);
  color: #FFFFFF;
}

.mars-consent__btn--quiet {
  background: transparent;
  border-color: transparent;
  color: rgba(234, 224, 246, 0.7);
  text-transform: none;
  letter-spacing: normal;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 0 8px;
}
.mars-consent__btn--quiet:hover { color: #FFFFFF; }

/* ----------------------------------------------------------------- focus */

.mars-consent__btn:focus-visible,
.mars-consent__link:focus-visible,
.mars-consent__check:focus-visible {
  outline: 2px solid #FB7439;
  outline-offset: 2px;
}

/* Windows High Contrast Mode: the tray's background image disappears, so the
   border is what keeps the banner distinguishable from the page. */
@media (forced-colors: active) {
  .mars-consent { border-top: 2px solid CanvasText; }
  .mars-consent__btn { border: 1px solid ButtonText; }
}

/* ------------------------------------------------------ screen-reader only */

.mars-consent__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ small */

@media (max-width: 520px) {
  .mars-consent__inner { padding: 16px 18px 18px; }
  .mars-consent__actions { gap: 10px; }
  /* Full-width stacked buttons on a phone, so neither choice is the one that
     needs a careful thumb. */
  .mars-consent__btn--primary,
  .mars-consent__btn--secondary { flex: 1 1 100%; }
}

/* The footer trigger. Sites style their own footers, so this only guarantees
   it is operable and focusable, not that it matches every footer exactly. */
[data-mars-cookie-settings] {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-mars-cookie-settings]:focus-visible {
  outline: 2px solid #FB7439;
  outline-offset: 2px;
}