/* Color Palette */
:root {
  --magic-blue: #7c5cff;
  --yellow: #ffeb42;
  --green: #4fffb6;
  --red: #ff0000;
  --blue: #b3ddf2;
  --grey: #f5f5f7;
  --primary: #333333;
}

/* Style Overrides */

/* The pre-audit card look, kept verbatim for the three screens that predate the
   mobile-native audit (devise/sessions/new, devise/passwords/new,
   items/edit). It used to be named `.card`, but this file is linked AFTER the
   Tailwind build in layouts/application.html.slim and both selectors are
   (0,1,0), so it won every tie against the `.card` COMPONENT class in
   application.tailwind.css -- any template adopting that component got 1.5rem /
   `0 8px 16px` instead of `md:rounded-2xl` / `md:shadow-lg`. Scoping this rule
   to `md+` (bead bees-ii0p) fixed mobile but not desktop; only giving up the
   `.card` name does (bead bees-qrd4, epic bees-4g09). `.card` now belongs
   solely to the component layer. Do not re-add a `.card` selector here.

   The elevation stays inside the `md` media query, so these screens remain flat
   and square-cornered on mobile exactly as bees-ii0p left them. */
.legacy-card {
  overflow: hidden;
}

@media (min-width: 768px) {
  .legacy-card {
    border-radius: 1.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  }
}

html,
body {
  margin: 10px;
  background-color: var(--grey);
}

/* Below Tailwind's `md` (768px) the page ground is plain white, so that every
   card / section / form container sits on THE SAME surface as the page instead
   of reading as a lighter panel floating on a grey ground (Pat, 2026-09-15, on
   the Sign in screen: "we don't need the different colored card here either,
   or anywhere, clean everything up so it's simpler"). The `--grey` ground is
   what produced that contrast, so it is scoped to desktop rather than removed
   -- desktop is unchanged. Separate mobile sections with a hairline, never with
   a background change. Same `max-width: 767.98px` complement of md's 768px the
   margin override below uses (bead bees-ii0p). */
@media (max-width: 767.98px) {
  html,
  body {
    background-color: #fff;
  }
}

/* Below Tailwind's `md` (768px) every screen must reach both screen edges.
   The 10px margin is what insets the page from the window edge on desktop, so
   drop only the horizontal half and only below the breakpoint. The vertical
   10px is deliberately kept: the bug and its acceptance criteria are purely
   horizontal, and the native shell supplies its own top/bottom safe-area
   padding. 767.98px is the exact complement of md's 768px. */
@media (max-width: 767.98px) {
  html,
  body {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Only apply these styles to links that don't have Tailwind classes and aren't buttons */
a:not([class*="btn"]):not([class*="bg-indigo"]):not([class*="bg-gradient-to-r"]):not([class*="text-white"]) {
  color: var(--primary);
  text-decoration: none;
}

a:not([class*="btn"]):not([class*="bg-indigo"]):not([class*="bg-gradient-to-r"]):not([class*="text-white"]):hover {
  color: var(--red);
  text-decoration: none;
}

.button {
  background: black;
  color: white;
  border: none;
}

.button:hover {
  background: var(--red);
  color: white;
  border: none;
}

.blue-bg {
  background: var(--blue);
}

/* credit: https://codepen.io/alvarotrigo/pen/PoKMyNO */
.animate-character {
  /* text-transform: uppercase; */
  background-image: linear-gradient(
    -225deg,
    var(--magic-blue) 0%,
    #44107a 29%,
    var(--red) 67%,
    var(--yellow) 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

/* Shimmering About Link */
.glimmer-link {
  position: relative;
  color: #dc2626 !important;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
}

.glimmer-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Start Selling Now Button - Force white text on hover */
a[href*="new_item"] {
  color: white !important;
}

a[href*="new_item"]:hover {
  color: white !important;
}