/* Bobo's Cana Cartel - small extras on top of Tailwind.
   Keep this file short: Tailwind does the layout work. */

:root {
  color-scheme: dark;
  --bobo-gold: #e8b923;
  --bobo-cream: #f6f1e4;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  text-rendering: optimizeLegibility;
}

/* Bebas Neue is condensed - a little breathing room helps readability. */
.font-display {
  letter-spacing: 0.02em;
}

/* Visible, brand-coloured focus ring for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bobo-gold);
  outline-offset: 2px;
}

/* The age gate fades in instead of flashing on first paint. */
#age-gate {
  animation: bobo-fade-in 180ms ease-out;
}

@keyframes bobo-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #age-gate {
    animation: none;
  }
}

/* Countdown digits should not jump around while ticking. */
[data-countdown-days],
[data-countdown-hours],
[data-countdown-minutes],
[data-countdown-seconds] {
  font-variant-numeric: tabular-nums;
}

/* Tables on wide CRM screens: keep long e-mail addresses from stretching cells. */
table th,
table td {
  vertical-align: middle;
}

/* Printable customer record: hide the chrome. */
@media print {
  header,
  footer,
  form,
  nav,
  .no-print {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
}