/* Homepage design contract: docs/homepage-design.md.
   Route-scoped, including the shared footer; dialogs and other pages retain their styles.
   Loaded after Tailwind so this single scale owns homepage typography and spacing. */
[data-site-shell]:has(.heading-hero) {
  --home-body: .9375rem;
  --home-body-line: 1.375rem;
  --home-small: .8125rem;
  --home-small-line: 1.125rem;
  --home-h1: 2.25rem;
  --home-h1-line: 2.5rem;
  --home-h2: 1.75rem;
  --home-h2-line: 2.125rem;
  --home-h3: 1.375rem;
  --home-h3-line: 1.75rem;
  --home-section: 3.5rem;
  --home-gutter: 1rem;
  --home-block: 2rem;
  --home-layout: 2rem;
  --home-price: 1.75rem;
  --home-price-line: 2.125rem;
}

[data-site-shell]:has(.heading-hero) :is(section, footer) {
  font-family: Inter, sans-serif;
  font-size: var(--home-body);
  line-height: var(--home-body-line);
  font-weight: 400;
}

[data-site-shell]:has(.heading-hero) section {
  padding-block: var(--home-section);
  padding-inline: var(--home-gutter);
}
[data-site-shell]:has(.heading-hero) section:has(.heading-hero) {
  padding-top: 7rem;
  min-height: 0;
}
/* The logo strip is a compact supporting element, not a content section. */
[data-site-shell]:has(.heading-hero) section:has(.animate-scroll) {
  padding-block: 1.5rem;
}

/* Decorative section labels add visual noise above headings. Functional labels,
   including step numbers and article categories, remain visible. */
[data-site-shell]:has(.heading-hero) section[aria-labelledby="home-references-heading"] p.uppercase,
[data-site-shell]:has(.heading-hero) #dashcam-einbau-muenchen > div > .grid > div:first-child > p.uppercase,
[data-site-shell]:has(.heading-hero) #dashcam-einbau-muenchen > div > .border-t > .flex > div > p.uppercase {
  display: none;
}

[data-site-shell]:has(.heading-hero) :is(section, footer) :is(h1, h2, h3) {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  letter-spacing: -.025em;
  margin-block: 0;
}
[data-site-shell]:has(.heading-hero) section h1 {
  font-size: var(--home-h1);
  line-height: var(--home-h1-line);
  letter-spacing: -.035em;
}
[data-site-shell]:has(.heading-hero) :is(section, footer) h2 {
  font-size: var(--home-h2);
  line-height: var(--home-h2-line);
}
[data-site-shell]:has(.heading-hero) :is(section, footer) h3 {
  font-size: var(--home-h3);
  line-height: var(--home-h3-line);
}

[data-site-shell]:has(.heading-hero) :is(section, footer) :is(p, blockquote, .home-copy),
[data-site-shell]:has(.heading-hero) section [role="region"] > div,
[data-site-shell]:has(.heading-hero) section li > span {
  font-family: Inter, sans-serif;
  font-size: var(--home-body);
  line-height: var(--home-body-line);
  font-weight: 400;
}
/* Secondary information stays secondary; descriptions are always body text. */
[data-site-shell]:has(.heading-hero) :is(section, footer) :is(p.text-xs, .home-meta, div.text-xs, span.text-xs) {
  font-size: var(--home-small);
  line-height: var(--home-small-line);
  font-weight: 400;
}
[data-site-shell]:has(.heading-hero) section a.group p.mt-0\.5 {
  font-size: var(--home-small);
  line-height: var(--home-small-line);
}
[data-site-shell]:has(.heading-hero) :is(section, footer) :is(p.uppercase, .home-label) {
  font-size: var(--home-small);
  line-height: var(--home-small-line);
  font-weight: 600;
  letter-spacing: .12em;
}
[data-site-shell]:has(.heading-hero) :is(section, footer) :is(button, a.inline-flex, a.underline, h4),
[data-site-shell]:has(.heading-hero) section button > span:not([aria-hidden]),
[data-site-shell]:has(.heading-hero) section .mt-auto.font-semibold {
  font-family: Inter, sans-serif;
  font-size: var(--home-small);
  line-height: var(--home-small-line);
  font-weight: 600;
}
/* Vehicle names and reviewer names are identification, not paragraph emphasis. */
[data-site-shell]:has(.heading-hero) section :is(p.font-bold.text-base, p.break-words.font-semibold) {
  font-weight: 600;
}
[data-site-shell]:has(.heading-hero) section p.text-3xl,
[data-site-shell]:has(.heading-hero) section p > span.text-3xl {
  font-family: Inter, sans-serif;
  font-size: var(--home-price);
  line-height: var(--home-price-line);
  font-weight: 600;
}

/* One spacing scale: label -> title 8; title -> copy 16;
   title -> card copy 8; copy -> content/actions 32. */
[data-site-shell]:has(.heading-hero) :is(section, footer) :is(h1, h2) + p {
  margin-top: 1rem;
}
[data-site-shell]:has(.heading-hero) :is(section, footer) h3 + p {
  margin-top: .5rem;
}
[data-site-shell]:has(.heading-hero) :is(section, footer) p + p {
  margin-top: 1rem;
}
[data-site-shell]:has(.heading-hero) section p.uppercase {
  margin-bottom: .5rem;
}
[data-site-shell]:has(.heading-hero) section p.uppercase + :is(h2, h3) {
  margin-top: 0;
}
[data-site-shell]:has(.heading-hero) section :is(h1, h2) + p,
[data-site-shell]:has(.heading-hero) section :is(p.mb-6, p.mb-8, p.mb-10, p.mb-16) {
  margin-bottom: var(--home-block);
}
/* Leads in a shared heading row have no extra bottom gap: content owns it. */
[data-site-shell]:has(.heading-hero) section .flex.flex-col > div > h2 + p,
[data-site-shell]:has(.heading-hero) #dashcam-einbau-muenchen h2 + p {
  margin-bottom: 0;
}
[data-site-shell]:has(.heading-hero) section .mt-8 {
  margin-top: var(--home-block);
}
[data-site-shell]:has(.heading-hero) section .grid.md\:grid-cols-2:not(.grid-cols-2) {
  gap: var(--home-layout);
}
[data-site-shell]:has(.heading-hero) #dashcam-einbau-muenchen > div > .grid {
  gap: var(--home-layout);
}
[data-site-shell]:has(.heading-hero) section .space-y-12 > * + * {
  margin-top: var(--home-section);
}
[data-site-shell]:has(.heading-hero) #dashcam-einbau-muenchen > div > .border-t {
  margin-top: var(--home-section);
  padding-top: var(--home-section);
}
[data-site-shell]:has(.heading-hero) section ul > li + li {
  margin-top: .5rem;
}
[data-site-shell]:has(.heading-hero) section p.text-3xl {
  margin-bottom: 1rem;
}
[data-site-shell]:has(.heading-hero) section .grid.grid-cols-2 {
  gap: 1rem;
}
[data-site-shell]:has(.heading-hero) section .group > div.flex-1,
[data-site-shell]:has(.heading-hero) section a.group > div.p-6 {
  padding: 1rem;
}
[data-site-shell]:has(.heading-hero) footer > div {
  padding-block: var(--home-section);
  padding-inline: var(--home-gutter);
}
[data-site-shell]:has(.heading-hero) footer h3 {
  margin-bottom: 1rem;
}
[data-site-shell]:has(.heading-hero) footer > div > .max-w-6xl {
  max-width: 80rem;
}
[data-site-shell]:has(.heading-hero) footer h2 + p {
  margin-bottom: var(--home-block);
}
[data-site-shell]:has(.heading-hero) footer p > .italic.font-semibold {
  font-style: normal;
  font-weight: inherit;
}

@media (min-width: 768px) {
  [data-site-shell]:has(.heading-hero) {
    --home-h2: 2.25rem;
    --home-h2-line: 2.6875rem;
    --home-h3: 1.5rem;
    --home-h3-line: 1.875rem;
    --home-section: 5rem;
    --home-gutter: 1.5rem;
    --home-layout: 3rem;
    --home-price: 2rem;
    --home-price-line: 2.375rem;
  }
  [data-site-shell]:has(.heading-hero) section:has(.heading-hero) {
    padding-top: 9rem;
  }
  [data-site-shell]:has(.heading-hero) section:has(.animate-scroll) {
    padding-block: 2rem;
  }
  [data-site-shell]:has(.heading-hero) section .grid.grid-cols-2 {
    gap: 1.5rem;
  }
  [data-site-shell]:has(.heading-hero) section .group > div.flex-1,
  [data-site-shell]:has(.heading-hero) section a.group > div.p-6 {
    padding: 1.5rem;
  }
}

/* Keep the H1 compact while the tablet hero already uses two columns. */
@media (min-width: 1024px) {
  [data-site-shell]:has(.heading-hero) {
    --home-h1: 3.25rem;
    --home-h1-line: 3.625rem;
  }
}

/* Shared footer legal controls are quiet text links on every route.
   The structural fallback also supports the verified pre-existing JS bundle. */
[data-site-shell] footer :is(.footer-legal-links, .border-t > .flex.flex-wrap) {
  align-items: center;
}
[data-site-shell] footer :is(.footer-legal-links, .border-t > .flex.flex-wrap) > :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #666;
  font-family: Inter, sans-serif;
  font-size: .8125rem;
  line-height: 1.125rem;
  font-weight: 400;
  text-decoration: none;
}
[data-site-shell] footer :is(.footer-legal-links, .border-t > .flex.flex-wrap) > :is(a, button):hover {
  color: #000;
  text-decoration: underline;
  text-underline-offset: .2em;
}
[data-site-shell] footer :is(.footer-legal-links, .border-t > .flex.flex-wrap) > :is(a, button):focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}