/* ============================================================================
   RentX — luxury vehicle-rental marketplace theme.

   Monochrome + photography: near-black ink on white/off-white, generous rounded photo cards, a
   confident Poppins type scale. No colour accent by default — the single per-site brand colour
   (`--brand`, injected by the render tier's siteTokens) recolours CTAs/emphasis, defaulting to ink
   so the theme reads premium and calm even with no brand set. Scoped under `.tej`. Zero client JS;
   all motion is CSS-only. Layout is Tailwind utilities in the components; this file holds the design
   tokens, the composable pieces (buttons / cards / search / dark bands) and the scroll motion.
   ============================================================================ */
.tej {
  /* Ink scale (near-neutral, faintly warm) */
  --ink: #17171a; /* headings, primary text, dark bands */
  --ink-2: #565660; /* body copy */
  --ink-3: #6e6d76; /* muted labels, captions — AA (≥4.5:1) on white */

  /* Surfaces + lines */
  --surface: #ffffff;
  --surface-2: #f6f5f3; /* warm off-white section band */
  --surface-3: #efeeea;
  --line: #e8e7ea;
  --line-soft: #f0eff1;
  --dark: #111014; /* dark bands (final CTA, footer) */

  /* Per-site brand: siteTokens injects --brand/--accent from the site row. Default to ink so the theme
     is monochrome until a site recolours it. --on-accent (readable text on the brand colour) is the
     theme's own choice — white here — not a per-site token. */
  --accent: var(--brand, #17171a);
  --on-accent: #ffffff;

  /* Fluid type */
  --step-hero: clamp(2.5rem, 1.5rem + 4.2vw, 4rem);
  --step-h2: clamp(1.85rem, 1.35rem + 2.2vw, 2.55rem);

  color: var(--ink-2);
  background: var(--surface);
  font-family: var(--font-tej), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 100%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tej h1,
.tej h2,
.tej h3,
.tej h4 {
  font-family: var(--font-tej);
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}

/* Colour helpers */
.tej .tej-ink {
  color: var(--ink);
}
.tej .tej-soft {
  color: var(--ink-2);
}
.tej .tej-faint {
  color: var(--ink-3);
}
.tej .tej-sunk {
  background: var(--surface-2);
}

/* RENTX-style wordmark — bold italic, the last glyph in the brand colour. */
.tej .tej-logo {
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.tej .tej-logo b {
  color: var(--accent);
  font-weight: 800;
}

/* Eyebrow — small uppercase label above a heading. */
.tej .tej-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Numbered step marker (ordered process). */
.tej .tej-grad {
  color: var(--ink);
}

/* Filled brand chip (header/footer logo mark). */
.tej .tej-brand-bg {
  background: var(--accent);
  color: var(--on-accent);
}

/* Sticky header */
.tej .tej-header {
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

/* Buttons — pill, confident. */
.tej .tej-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}
.tej .tej-btn--brand {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 16px 34px -20px color-mix(in oklab, var(--accent) 80%, transparent);
}
.tej .tej-btn--brand:hover {
  transform: translateY(-2px);
  background: color-mix(in oklab, var(--accent) 88%, #000);
}
.tej .tej-btn--ghost {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.tej .tej-btn--ghost:hover {
  box-shadow: inset 0 0 0 1.5px var(--ink-3);
}
/* On dark bands — white button, ink text. */
.tej .tej-btn--light {
  background: #fff;
  color: var(--ink);
}
.tej .tej-btn--light:hover {
  transform: translateY(-2px);
  background: color-mix(in oklab, #fff 90%, #000);
}

/* Cards — generous radius, hairline border, soft shadow. */
.tej .tej-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  box-shadow: 0 14px 32px -24px rgba(20, 16, 22, 0.4);
}

/* Hero quote widget */
.tej .tej-quote {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  box-shadow: 0 34px 70px -42px rgba(20, 16, 22, 0.55);
  padding: 10px;
}
.tej .tej-field {
  padding: 13px 18px;
  border-radius: 1rem;
  transition: background 0.15s ease;
}
.tej .tej-field:hover {
  background: var(--surface-2);
}
.tej .tej-field .tej-field-lbl {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Dark band (final CTA / footer) — light content on top. */
.tej .tej-dark {
  background: var(--dark);
  color: #c9c8d0;
}
.tej .tej-dark h2,
.tej .tej-dark h3,
.tej .tej-dark h4 {
  color: #fff;
}

/* Prose — styles an author's sanitised HTML body (page.content) on editorial pages (about/contact/
   custom). The theme supplies the typography; the CMS supplies the words. */
.tej .tej-prose {
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.75;
}
.tej .tej-prose > * + * {
  margin-top: 1.1rem;
}
.tej .tej-prose h2 {
  font-size: 1.6rem;
  margin-top: 2.4rem;
}
.tej .tej-prose h3 {
  font-size: 1.25rem;
  margin-top: 1.8rem;
}
.tej .tej-prose a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.tej .tej-prose a:hover {
  text-decoration-color: var(--ink);
}
.tej .tej-prose strong {
  color: var(--ink);
  font-weight: 600;
}
.tej .tej-prose ul,
.tej .tej-prose ol {
  padding-left: 1.25rem;
}
.tej .tej-prose li {
  margin-top: 0.4rem;
}
.tej .tej-prose ul > li {
  list-style: disc;
}
.tej .tej-prose ol > li {
  list-style: decimal;
}

/* Accessible focus */
.tej a:focus-visible,
.tej button:focus-visible,
.tej input:focus-visible,
.tej select:focus-visible,
.tej summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Skip link */
.tej .tej-skip {
  position: absolute;
  left: 1rem;
  top: -3.5rem;
  z-index: 60;
  padding: 0.7rem 1.1rem;
  border-radius: 0.75rem;
  background: var(--ink);
  color: #fff;
  transition: top 0.15s ease;
}
.tej .tej-skip:focus {
  top: 1rem;
}

/* Quiet rise as sections enter — transform only (never opacity, so content is never hidden or read
   as low-contrast). Progressive enhancement — no view() timeline (e.g. Safari) or reduced-motion
   shows content immediately. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tej .tej-reveal {
      animation: tej-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
    @keyframes tej-rise {
      from {
        transform: translateY(1.25rem);
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .tej .tej-btn {
    transition: none;
  }
  .tej .tej-btn--brand:hover,
  .tej .tej-btn--light:hover {
    transform: none;
  }
}