/* Routes UI polish — typography, spacing, sheets, mobile */
:root {
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --text-hero: clamp(2.15rem, 6.5vw, 5rem);
  --text-h1: clamp(1.75rem, 3.4vw, 2.85rem);
  --text-h2: clamp(1.5rem, 2.8vw, 2.35rem);
  --text-h3: clamp(1.2rem, 1.6vw, 1.55rem);
  --text-body: 1.0625rem;
}

html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  letter-spacing: -0.011em;
  line-height: 1.55;
}

.font-display,
h1,
h2,
h3,
h4 {
  font-family: var(--font-display) !important;
}

h1 {
  font-size: var(--text-h1) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em;
  font-weight: 700 !important;
  text-wrap: balance;
}

h2 {
  font-size: var(--text-h2) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em;
  font-weight: 700 !important;
  text-wrap: balance;
}

h3 {
  font-size: var(--text-h3) !important;
  line-height: 1.28 !important;
  letter-spacing: -0.02em;
  font-weight: 700 !important;
  text-wrap: balance;
}

.type-hero {
  font-family: var(--font-display) !important;
  font-size: var(--text-hero) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
  font-weight: 700 !important;
  text-wrap: balance;
  max-width: 18ch;
}

.deal-title {
  font-family: var(--font-display) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  font-size: clamp(1.65rem, 4.2vw, 2.65rem) !important;
  font-weight: 700 !important;
  text-wrap: balance;
}

.section-shell {
  max-width: 110rem;
  margin-inline: auto;
  padding-inline: max(1.25rem, calc(var(--spacing) * 5)) !important;
  padding-block: calc(var(--spacing) * 16) !important;
}

@media (min-width: 768px) {
  .section-shell {
    padding-inline: calc(var(--spacing) * 10) !important;
    padding-block: calc(var(--spacing) * 22) !important;
  }
}

/* Breathing room between stacked blocks */
main > section + section,
.section-shell + .section-shell {
  scroll-margin-top: 1rem;
}

/* Sheets / dialogs — tidy mobile chrome */
[role="dialog"] {
  font-family: var(--font-sans);
}

[role="dialog"] h2,
[role="dialog"] h3 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  line-height: 1.2 !important;
  text-wrap: balance;
}

@media (max-width: 767px) {
  :root {
    --text-hero: clamp(2rem, 9vw, 2.55rem);
    --text-h1: clamp(1.55rem, 7vw, 2rem);
    --text-h2: clamp(1.35rem, 6vw, 1.75rem);
    --text-h3: clamp(1.125rem, 4.5vw, 1.35rem);
  }

  .type-hero {
    max-width: 14ch;
    line-height: 1.08 !important;
  }

  .deal-title {
    font-size: clamp(1.55rem, 7.5vw, 2rem) !important;
    line-height: 1.1 !important;
  }

  .section-shell {
    padding-inline: 1.25rem !important;
    padding-block: 3.5rem !important;
  }

  /* Bottom sheets feel calmer and more readable */
  [role="dialog"].absolute.inset-x-0.bottom-0,
  aside[role="dialog"].inset-x-0.bottom-0 {
    border-top-left-radius: 1.5rem !important;
    border-top-right-radius: 1.5rem !important;
    box-shadow: 0 -18px 48px rgba(14, 17, 22, 0.18) !important;
  }

  [role="dialog"] h2 {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
    padding-right: 0.25rem;
  }

  /* Avoid cramped filter chips / pills on small screens */
  [role="dialog"] button.rounded-full {
    min-height: 2.5rem;
    padding-inline: 1rem !important;
  }

  [role="dialog"] button.rounded-2xl {
    min-height: 3.25rem;
  }

  /* Hero / marketing uppercase stacks less aggressively */
  .uppercase.type-hero,
  h1.uppercase,
  h2.uppercase {
    letter-spacing: -0.02em !important;
  }
}

/* Safer long words in tight panels */
[role="dialog"] p,
[role="dialog"] label,
[role="dialog"] span {
  overflow-wrap: anywhere;
}

/* Card / list density — slightly more air on mobile */
@media (max-width: 767px) {
  .space-y-3 > :not([hidden]) ~ :not([hidden]) {
    margin-block-start: 0.95rem !important;
  }

  .space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-block-start: 1.65rem !important;
  }
}

/* Extra mobile polish pass */
@media (max-width: 767px) {
  /* Keep promo deal titles to one tidy line */
  .deal-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Filter type cards: one-line subs */
  [role="dialog"] .grid.grid-cols-2 > button span.block.text-\[11px\],
  [role="dialog"] .grid.grid-cols-2 > button span[class*="text-[11px]"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* More air under sticky search / greeting blocks */
  .pb-28 {
    padding-bottom: 7.5rem !important;
  }
}

/* Sheet titles use display face cleanly */
[role="dialog"] h2.font-display {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
}


/* Force display face (Tailwind had a conflicting !important on .font-display) */
.font-display {
  font-family: "Plus Jakarta Sans", "DM Sans", ui-sans-serif, system-ui, sans-serif !important;
}

/* Keep extrabold/black readable on mobile display face */
.font-black,
.font-extrabold {
  font-weight: 800 !important;
}

@media (max-width: 767px) {
  /* Section titles: one clean line, more air */
  h2.font-display {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em !important;
    text-transform: none !important;
  }

  [role="dialog"] .grid {
    gap: 0.65rem !important;
  }
}


/* Soften ultra-wide label tracking that looked stretched */
.tracking-\[0\.2em\],
.tracking-\[0.2em\] {
  letter-spacing: 0.06em !important;
}
.uppercase.tracking-wide,
.tracking-wide {
  letter-spacing: 0.04em !important;
}

/* Install / A2HS banner: keep tidy on small screens */
@media (max-width: 767px) {
  /* Prefer compact single-line helper copy where possible */
  .truncate {
    max-width: 100%;
  }
}


/* Label tracking polish */
[class*="tracking-[0.2em]"],
[class*="tracking-[0.08em]"] {
  letter-spacing: 0.07em !important;
}

@media (max-width: 767px) {
  /* Greeting "Hello" less dominating */
  h1.font-display {
    font-size: clamp(1.85rem, 8vw, 2.35rem) !important;
    letter-spacing: -0.04em !important;
    line-height: 1.05 !important;
  }

  /* Section stacks need more air */
  .mt-10 { margin-top: 2.75rem !important; }
  .mt-12 { margin-top: 3.25rem !important; }
  .gap-6 { gap: 1.65rem !important; }

  /* Sheets sit above install banner clutter */
  [role="dialog"] {
    z-index: 90;
  }
}


/* Greeting rhythm */
@media (max-width: 767px) {
  h1.font-display.mt-1 {
    margin-top: 0.35rem !important;
    margin-bottom: 0.35rem !important;
  }
}


/* Vehicle selection sheet */
@media (max-width: 767px) {
  aside[role="dialog"].inset-x-0.bottom-0 {
    max-height: 92dvh !important;
    height: 92dvh !important;
    overflow: hidden !important;
    border-top-left-radius: 1.35rem !important;
    border-top-right-radius: 1.35rem !important;
  }

  aside[role="dialog"] h2.font-display {
    font-size: 1.25rem !important;
    line-height: 1.15 !important;
    text-transform: none !important;
  }

  /* Keep rate block readable above sticky CTA */
  aside[role="dialog"] .flex-1.overflow-y-auto {
    padding-bottom: 0.5rem !important;
  }
}


/* Vehicle sheet layering + density */
body:has(aside[role="dialog"]) {
  /* Install/A2HS banners often sit at high z — tuck them under the sheet */
}
body:has(aside[role="dialog"]) .fixed.bottom-auto,
body:has(aside[role="dialog"]) .fixed.top-3,
body:has(aside[role="dialog"]) .fixed.top-4 {
  z-index: 40 !important;
}

aside[role="dialog"] {
  z-index: 91 !important;
}

@media (max-width: 767px) {
  aside[role="dialog"].inset-x-0.bottom-0,
  aside[role="dialog"] {
    max-height: 92dvh !important;
  }

  aside[role="dialog"] .grid.grid-cols-4 {
    gap: 0.35rem !important;
  }
}