/* CarMisto public surface grammar.
   This file is loaded last so server-rendered pages, SPA screens and the
   standalone catalogue/detail pages share the same card, panel, field and
   ordinary hero treatment. Branded dark heroes keep their own explicit theme. */
:root {
  --cm-surface: #ffffff;
  --cm-surface-subtle: #f5f7fa;
  --cm-surface-text: #202b3a;
  --cm-surface-muted: #5c6879;
  --cm-surface-border: #dfe5eb;
  --cm-surface-radius: 18px;
  --cm-surface-shadow: 0 10px 28px rgba(28, 40, 57, .07);
  --cm-control-radius: 12px;
}

[data-theme='dark'] {
  --cm-surface: #1b2129;
  --cm-surface-subtle: #242d37;
  --cm-surface-text: #f4f7fb;
  --cm-surface-muted: #c1cbd6;
  --cm-surface-border: #3c4855;
  --cm-surface-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

/* Keep all content surfaces readable in either theme. The article selector is
   deliberately explicit: it prevents a legacy article background from
   turning a no-photo newsroom story into a dark card with dark text. */
:is(
  .public-page__card,
  .public-surface,
  .news-card,
  .inventory-card,
  .inventory-landing__summary > div,
  .inventory-landing__location-list > a,
  .inventory-landing__faq details,
  .marketplace-panel,
  .legal-page,
  .panel,
  .booking,
  .stats > div,
  .card,
  .city-discovery,
  .faq details,
  .affiliate-page__promise > article,
  .affiliate-page__steps > article,
  .affiliate-page__formula-card,
  .affiliate-page__calculator,
  .affiliate-page__dashboard-card,
  .partner-page__route-card,
  .partner-page__benefit-card,
  .partner-page__quality-note,
  .business-panel,
  .affiliate-dashboard__card,
  .affiliate-dashboard__panel
) {
  border-color: var(--cm-surface-border);
  border-radius: var(--cm-surface-radius);
  background-color: var(--cm-surface);
  color: var(--cm-surface-text);
  box-shadow: var(--cm-surface-shadow);
}

:is(
  .public-page__card,
  .public-surface,
  .news-card,
  .inventory-card,
  .inventory-landing__summary > div,
  .inventory-landing__location-list > a,
  .inventory-landing__faq details,
  .marketplace-panel,
  .legal-page,
  .panel,
  .booking,
  .stats > div,
  .card,
  .city-discovery,
  .faq details,
  .affiliate-page__promise > article,
  .affiliate-page__steps > article,
  .affiliate-page__formula-card,
  .affiliate-page__calculator,
  .affiliate-page__dashboard-card,
  .partner-page__route-card,
  .partner-page__benefit-card,
  .partner-page__quality-note,
  .business-panel,
  .affiliate-dashboard__card,
  .affiliate-dashboard__panel
) :is(h1, h2, h3, h4, strong, b) {
  color: var(--cm-surface-text);
}

:is(
  .public-page__card,
  .public-surface,
  .news-card,
  .inventory-card,
  .inventory-landing__summary > div,
  .inventory-landing__location-list > a,
  .inventory-landing__faq details,
  .marketplace-panel,
  .legal-page,
  .panel,
  .booking,
  .stats > div,
  .card,
  .city-discovery,
  .faq details,
  .affiliate-page__promise > article,
  .affiliate-page__steps > article,
  .affiliate-page__formula-card,
  .affiliate-page__calculator,
  .affiliate-page__dashboard-card,
  .partner-page__route-card,
  .partner-page__benefit-card,
  .partner-page__quality-note,
  .business-panel,
  .affiliate-dashboard__card,
  .affiliate-dashboard__panel
) :is(p, li, small, time, .meta, .sub, .label, .text-muted) {
  color: var(--cm-surface-muted);
}

:is(
  .public-page__card,
  .public-surface,
  .news-card,
  .inventory-card,
  .inventory-landing__summary > div,
  .inventory-landing__location-list > a,
  .inventory-landing__faq details,
  .marketplace-panel,
  .legal-page,
  .panel,
  .booking,
  .stats > div,
  .card,
  .city-discovery,
  .faq details,
  .affiliate-page__promise > article,
  .affiliate-page__steps > article,
  .affiliate-page__formula-card,
  .affiliate-page__calculator,
  .affiliate-page__dashboard-card,
  .partner-page__route-card,
  .partner-page__benefit-card,
  .partner-page__quality-note,
  .business-panel,
  .affiliate-dashboard__card,
  .affiliate-dashboard__panel
) a {
  color: var(--primary, #c9161d);
}

/* News article: one readable surface for both photo and no-photo stories. */
body.site-shell .news-article > article,
.news-article > article {
  background: var(--cm-surface) !important;
  background-image: none !important;
  border: 1px solid var(--cm-surface-border) !important;
  border-radius: var(--cm-surface-radius) !important;
  box-shadow: var(--cm-surface-shadow) !important;
  color: var(--cm-surface-text) !important;
}

.news-article > article .news-article__header h1,
.news-article > article .news-article__body > p,
.news-article > article .news-article__takeaway strong,
.news-article > article .news-article__takeaway p {
  color: var(--cm-surface-text) !important;
}

/* style.css contains a legacy global `header` rule for the site shell. It
   must never style the semantic header inside a news card. */
body.site-shell .news-article > article .news-article__header {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--cm-surface) !important;
  box-shadow: none !important;
  color: var(--cm-surface-text) !important;
}

.news-article > article .news-article__meta,
.news-article > article .news-article__lead,
.news-article > article .news-article__source-line,
.news-article > article .news-article__source-line span,
.news-article > article .news-article__takeaway {
  color: var(--cm-surface-muted) !important;
}

.news-article > article .news-card__manufacturer,
.news-article > article .news-article__source-line a,
.news-article > article .news-card__category {
  color: var(--primary, #c9161d) !important;
}

.news-article__takeaway,
.news-card__source,
.affiliate-page__formula,
.affiliate-page__calculator-result,
.partner-page__choice,
.public-page__overview-item,
.condition-grid,
.transparent div,
.partner-reply {
  border-color: var(--cm-surface-border);
  background: var(--cm-surface-subtle);
  color: var(--cm-surface-text);
}

/* The SPA loads several legacy layers after the public-page stylesheet. Keep
   ordinary contextual heroes readable after that cascade: the light hero
   uses dark text, while affiliate and partner heroes retain their intentional
   dark, high-contrast art direction. */
body.site-shell .public-page .public-page__hero:not(.affiliate-page__hero):not(.partner-page__hero) {
  background: var(--marketplace-hero, linear-gradient(125deg, #fff 0%, #f4f7fb 58%, #fff0f1 100%)) !important;
  border: 1px solid var(--marketplace-hero-border, #dfe5eb) !important;
  color: #202b3a !important;
  box-shadow: var(--cm-surface-shadow) !important;
}

body.site-shell .public-page .public-page__hero:not(.affiliate-page__hero):not(.partner-page__hero) :is(h1, h2) {
  color: #202b3a !important;
  -webkit-text-fill-color: #202b3a !important;
}

body.site-shell .public-page .public-page__hero:not(.affiliate-page__hero):not(.partner-page__hero) > p:not(.public-page__eyebrow) {
  color: #5c6879 !important;
  -webkit-text-fill-color: #5c6879 !important;
}

body.site-shell .public-page .public-page__hero:not(.affiliate-page__hero):not(.partner-page__hero) .public-page__eyebrow {
  display: block !important;
  color: #c9161d !important;
  -webkit-text-fill-color: #c9161d !important;
}

html[data-theme="dark"] body.site-shell .public-page .public-page__hero:not(.affiliate-page__hero):not(.partner-page__hero) {
  background: linear-gradient(125deg, #1b2129 0%, #222c37 58%, #3a2026 100%) !important;
  border-color: #465465 !important;
  color: #f4f7fb !important;
}

html[data-theme="dark"] body.site-shell .public-page .public-page__hero:not(.affiliate-page__hero):not(.partner-page__hero) :is(h1, h2) {
  color: #f4f7fb !important;
  -webkit-text-fill-color: #f4f7fb !important;
}

html[data-theme="dark"] body.site-shell .public-page .public-page__hero:not(.affiliate-page__hero):not(.partner-page__hero) > p:not(.public-page__eyebrow) {
  color: #c1cbd6 !important;
  -webkit-text-fill-color: #c1cbd6 !important;
}

/* Shared form fields. Scope is limited to public forms and detail panels so
   catalogue controls and navigation keep their existing behavior. */
:is(
  .public-page,
  .rental-guide,
  .affiliate-dashboard,
  .car-detail-page,
  .legal-page
) :is(input, select, textarea) {
  min-height: 44px;
  border: 1px solid var(--cm-surface-border) !important;
  border-radius: var(--cm-control-radius) !important;
  background: var(--cm-surface-subtle) !important;
  color: var(--cm-surface-text) !important;
}

:is(
  .public-page,
  .rental-guide,
  .affiliate-dashboard,
  .car-detail-page,
  .legal-page
) :is(input, select, textarea):focus-visible {
  border-color: var(--primary, #c9161d) !important;
  outline: 2px solid color-mix(in srgb, var(--primary, #c9161d) 24%, transparent);
  outline-offset: 1px;
}

:is(.public-page, .rental-guide, .affiliate-dashboard, .car-detail-page, .legal-page) label {
  color: var(--cm-surface-text);
}

@media (max-width: 720px) {
  :is(
    .public-page__card,
    .public-surface,
    .news-card,
    .inventory-card,
    .panel,
    .booking,
    .card,
    .marketplace-panel,
    .affiliate-page__promise > article,
    .affiliate-page__steps > article,
    .affiliate-page__formula-card,
    .affiliate-page__calculator,
    .partner-page__route-card,
    .partner-page__benefit-card,
    .business-panel,
    .affiliate-dashboard__card,
    .affiliate-dashboard__panel
  ) {
    border-radius: var(--cm-surface-radius) !important;
  }
}

/* Keep page-specific legacy CSS from reintroducing a second card language.
   The radius is the same on desktop and mobile; only the layout changes at
   the breakpoint. */
:where(
  .public-page__card,
  .public-surface,
  .news-card,
  .inventory-card,
  .inventory-landing__summary > div,
  .inventory-landing__location-list > a,
  .inventory-landing__faq details,
  .marketplace-panel,
  .legal-page,
  .panel,
  .booking,
  .stats > div,
  .card,
  .city-discovery,
  .faq details,
  .affiliate-page__promise > article,
  .affiliate-page__steps > article,
  .affiliate-page__formula-card,
  .affiliate-page__calculator,
  .affiliate-page__dashboard-card,
  .partner-page__route-card,
  .partner-page__benefit-card,
  .partner-page__quality-note,
  .business-panel,
  .affiliate-dashboard__card,
  .affiliate-dashboard__panel
) {
  border-radius: var(--cm-surface-radius) !important;
}