/* Fixit — workbench theme.
   Safety-orange + steel + asphalt for trades and services: auto
   repair, plumbers, contractors, cleaners. A hazard-stripe divider
   band and a fixed-right marquee. All self-hosted; nothing here
   moves without content. */

html[data-theme="fixit"] {
  --brand: #d0622a;
  --brand-deep: #2b2119;
  --brand-soft: #f7e8da;
  --hero-bg: #211a13;
  --hero-ink: #f7efe4;
  --accent: #e8b23c;
  --safety: #d0622a;
  --steel: #8d97a3;
  --asphalt: #2b2119;
}

html[data-theme="fixit"] .hero {
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(232 178 60 / 0.14), transparent 60%),
    var(--hero-bg);
}

/* --- hazard-stripe divider -------------------------------------------------------- */
.hazard-band {
  height: 18px;
  background: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 16px,
    var(--asphalt) 16px 32px
  );
  border-block: 1px solid rgb(232 178 60 / 0.5);
}

/* --- fixed-right marquee -------------------------------------------------------------- */
.fixedright {
  overflow: hidden;
  background: var(--asphalt);
  color: var(--accent);
  border-block: 1px solid var(--safety);
  padding-block: 0.55rem;
}
.fixedright-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: fixedright-scroll 25s linear infinite;
  will-change: transform;
}
.fixedright-track span {
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem;
  white-space: nowrap;
}
@keyframes fixedright-scroll {
  to { transform: translateX(-50%); }
}

html[data-theme="fixit"] .service {
  border-color: rgb(208 98 42 / 0.4);
  background: linear-gradient(180deg, var(--brand-soft), transparent 140%);
}

html[data-theme="fixit"] .site-footer {
  background: var(--asphalt);
  color: var(--hero-ink);
}

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