/* Permits2Go brand overrides for the Nexsas "automation-saas" theme.
   Loaded after main.css; unlayered rules override the compiled @layer theme
   tokens. Keep this file tiny — recolor via tokens, not per-component CSS. */
:root,
:host {
  /* Template violet #864ffe -> Permits2Go purple */
  --color-primary-500: #6e3492;
  /* Template lime CTA gradient -> lavender tints of the brand purple,
     kept light so the dark icons/text sitting on it stay readable */
  --color-gradient-14: linear-gradient(180deg, #ead9f5 0%, #cfaee6 100%);
  /* Header lockup geometry, shared by .brand-mark and the mobile centring
     below. --brand-lockup-gap mirrors the `gap-2` class on the header's
     brand anchor; keep the two in step if that class ever changes. */
  --brand-mark-width: 44px;
  --brand-lockup-gap: 8px;
}

/* The process timeline's fill gradient is a compiled arbitrary-value class
   (to-[#864FFE]); recolor it here since the hex is baked into the selector. */
.to-\[\#864FFE\] {
  --tw-gradient-to: #6e3492;
}

/* Hero backdrop: replaces the template's 16MB background video with a soft
   brand-purple wash over the page background. */
.hero-brand-bg {
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(110, 52, 146, 0.16) 0%, rgba(110, 52, 146, 0.05) 55%, rgba(110, 52, 146, 0) 100%),
    linear-gradient(180deg, #f7f3fa 0%, #f2f5fa 100%);
}

/* Brand lockup: the mark and the wordmark are separate images so the name stays
   legible at header size. The old single asset squeezed the whole stacked
   lockup — mark, name and tagline — into a 44px box. */
.brand-mark {
  width: var(--brand-mark-width);
  flex-shrink: 0;
}

.brand-wordmark {
  width: 132px;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .brand-wordmark {
    width: 168px;
  }
}

/* Below the desktop breakpoint the nav and the sign-in/CTA block are hidden, so
   the header pill's `justify-between` had only the lockup and the hamburger to
   space out — which stranded the Permits2Go name against the left edge with a
   dead gap beside it. Take the lockup out of flow and centre it in the pill;
   `margin-left: auto` keeps the hamburger on the right edge without it.

   It is the wordmark that has to read as centred, not the lockup's bounding
   box: the mark sits to its left, so centring the box leaves the name off to
   the right by half the mark plus the gap between them (26px at these
   sizes). The anchor's own padding is symmetric and cancels out, so backing
   the box off by exactly that much puts "Permits2Go" on the pill's centre
   line at every width. */
@media (max-width: 1279px) {
  .header-brand {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(
      calc(-50% - (var(--brand-mark-width) + var(--brand-lockup-gap)) / 2),
      -50%
    );
  }

  .header-mobile-toggle {
    margin-left: auto;
  }
}

/* Narrow phones: at full size the centred wordmark would butt against the
   hamburger, so trim it back a little below ~360px. */
@media (max-width: 359px) {
  .brand-wordmark {
    width: 112px;
  }
}

/* Utilities used by our pages that the template's compiled CSS never emitted. */
.text-primary-500 {
  color: var(--color-primary-500);
}

@media (min-width: 768px) {
  .md\:text-left {
    text-align: left;
  }
}

@media (min-width: 1280px) {
  .xl\:col-span-3 {
    grid-column: span 3 / span 3;
  }
}

/* Hero background video: a light veil keeps the headline readable over the
   construction footage; the video hides for reduced-motion users. */
.hero-video-veil {
  background: linear-gradient(180deg,
      rgba(247, 243, 250, 0.86) 0%,
      rgba(247, 243, 250, 0.62) 45%,
      rgba(242, 245, 250, 0.3) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-video {
    display: none;
  }
}

/* Floating hero tags (rebuilt from the template's baked-in SVG labels so the
   text stays editable). Positioned against the dashboard capture, not the hero
   box, so each cursor lands on the metric tile its label names — Permit Forms
   on Pending Forms, Drawings on Pending Drawings — at every width. The
   percentages are read off DashboardScreenshot.png: both tiles sit ~21-33%
   down, centred at ~62% and ~86% across. */
.hero-tag-wrap {
  position: absolute;
  z-index: 30;
}

/* The cursor hangs off the pill's right edge, so `left` sets the pill and the
   cursor tip lands a pill-width further along. */
.hero-tag-left {
  left: 54%;
  top: 30%;
}

/* Mirrored: this cursor sits at the pill's left edge, on the tile itself. */
.hero-tag-right {
  left: 85%;
  top: 30%;
}

/* The pills are a fixed pixel width, so on a narrow dashboard the right one
   would hang off the capture. Pull it in; the tile is wide enough that the
   cursor still lands inside it. */
@media (max-width: 1023px) {
  .hero-tag-right {
    left: 78%;
  }
}

.hero-tag {
  display: inline-block;
  background: #e6d4f7;
  border-radius: 9999px;
  padding: 0.5rem 1.1rem;
  white-space: nowrap;
}

.hero-tag-alt {
  background: #d3b1ef;
}

.hero-tag-cursor {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.hero-tag-cursor-left {
  margin-left: auto;
  margin-right: 0.2rem;
  margin-bottom: 0.15rem;
}

.hero-tag-cursor-right {
  margin-right: auto;
  margin-left: 0.2rem;
  margin-bottom: 0.15rem;
  transform: scaleX(-1);
}