/* Template 2 is the dark-mode counterpart of template 1. */

:root {
  --dark-page: #0f1115;
  --dark-surface: #171a20;
  --dark-surface-raised: #1d2129;
  --dark-border: rgb(255 255 255 / 12%);
  --dark-text: #f4f5f7;
  --dark-muted: #a5acb8;
}

body,
.page-section,
.latest-cars,
.offer-page,
.about-page,
.about-section,
.company-location,
.regular-page,
.legal-page,
.vehicle-details-page {
  background-color: var(--dark-page);
  color: var(--dark-text);
}

.site-header,
.site-header.hero-header.scrolled {
  --header-text: var(--dark-text);
  background-color: rgb(15 17 21 / 96%);
  color: var(--dark-text);
  box-shadow: 0 5px 24px rgb(0 0 0 / 30%);
}

.site-header.hero-header:not(.scrolled) {
  background-color: transparent;
  box-shadow: none;
}

.top-header,
.hero-header.scrolled .top-header {
  color: var(--dark-muted);
  border-bottom-color: var(--dark-border);
}

.mobile-nav {
  background-color: var(--dark-surface);
  color: var(--dark-text);
}

.section-title,
.offer-title,
.regular-title,
.legal-title,
.vehicle-details-title,
.about-title,
.car-price,
.location-title,
.block-title,
.car-name,
.vehicle-details-section h2 {
  color: var(--dark-text);
}

.section-description,
.offer-description,
.regular-content,
.legal-content,
.about-content,
.location-content,
.block-content,
.car-subtitle,
.car-spec,
.car-price-note,
.offer-results-count,
.vehicle-details-back,
.vehicle-details-reference {
  color: var(--dark-muted);
}

.about-description,
.about-description .trix-content,
.about-description .trix-content div,
.about-description .trix-content p,
.company-location-description,
.company-location-item p,
.company-location-link,
.company-location-hours-row dt {
  color: var(--dark-muted);
}

.about-guarantee-card h2,
.company-location-title,
.company-location-item h3,
.company-location-hours-row dd {
  color: var(--dark-text);
}

.car-filters-box,
.car-card,
.location-card,
.about-card,
.block-card,
.vehicle-details-section,
.vehicle-purchase-card {
  border-color: var(--dark-border);
  background-color: var(--dark-surface);
  box-shadow: 0 10px 30px rgb(0 0 0 / 20%);
}

.about-guarantee-card,
.company-location-card,
.company-location-details {
  color: var(--dark-text);
  border-color: var(--dark-border);
  background-color: var(--dark-surface);
}

.about-guarantee-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--dark-border));
  box-shadow: 0 10px 24px rgb(0 0 0 / 26%);
}

.about-button-secondary {
  color: var(--color-primary);
  border-color: var(--dark-border);
  background-color: var(--dark-surface-raised);
}

.about-button-secondary:hover,
.about-button-secondary:focus-visible {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: var(--dark-surface-raised);
}

.company-location-icon {
  background-color: color-mix(in srgb, var(--color-primary) 16%, var(--dark-surface-raised));
}

.company-location-map,
.company-location-map-empty {
  background-color: #222731;
}

.car-filter-input,
.car-filter-select,
.advanced-fields input,
.offer-sort-form select {
  color: var(--dark-text);
  border-color: var(--dark-border);
  background-color: var(--dark-surface-raised);
}

.car-filter-input input,
.car-filter-select select,
.advanced-fields input,
.offer-sort-form select {
  color: var(--dark-text);
  background-color: var(--dark-surface-raised);
}

.car-filter-input input::placeholder,
.advanced-fields input::placeholder {
  color: #767e8c;
}

.car-filters-toggle,
.car-filters-clear {
  color: var(--dark-text);
  border-color: var(--dark-border);
  background-color: var(--dark-surface-raised);
}

.car-card-bottom,
.car-specs,
.offer-results-header,
.footer-bottom {
  border-color: var(--dark-border);
}

.car-card-image,
.car-image-placeholder,
.vehicle-gallery,
.vehicle-gallery-main,
.vehicle-gallery-placeholder,
.vehicle-gallery-thumbnail,
.vehicle-specification {
  border-color: var(--dark-border);
  background-color: var(--dark-surface-raised);
}

.vehicle-specification dt,
.vehicle-purchase-label,
.vehicle-purchase-tax {
  color: var(--dark-muted);
}

.vehicle-specification dd,
.vehicle-purchase-price {
  color: var(--dark-text);
}

.vehicle-details-subtitle,
.vehicle-details-description,
.vehicle-equipment-list li,
.vehicle-purchase-tax,
.vehicle-purchase-note,
.vehicle-purchase-note p,
.vehicle-purchase-company-info {
  color: #aeb5c1;
}

.vehicle-purchase-tax strong {
  color: var(--dark-text);
}

.vehicle-purchase-button-primary {
  color: #fff;
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.vehicle-purchase-button-secondary {
  color: var(--color-primary);
  border-color: var(--dark-border);
  background-color: var(--dark-surface-raised);
}

.vehicle-purchase-button-secondary:hover,
.vehicle-purchase-button-secondary:focus-visible {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: var(--dark-surface-raised);
}

.vehicle-purchase-note {
  border-top-color: var(--dark-border);
}

.vehicle-purchase-company {
  border: 1px solid var(--dark-border);
  background-color: var(--dark-surface-raised);
}

.vehicle-purchase-company-name,
.vehicle-similar-title {
  color: var(--dark-text);
}

.site-footer {
  color: var(--dark-muted);
  background-color: #090b0e;
}

.footer-company-name,
.footer-section h3,
.footer-department-name {
  color: var(--dark-text);
}

.footer-info,
.footer-company-description,
.footer-copyright,
.footer-bottom-links {
  color: var(--dark-muted);
}

.legal-hero,
.regular-hero {
  background-color: var(--dark-surface);
}

.legal-document {
  color: #d5d8df;
  border-color: var(--dark-border);
  background-color: var(--dark-surface);
  box-shadow: 0 10px 30px rgb(0 0 0 / 24%);
}

.legal-document-content,
.legal-document-content .trix-content,
.legal-document-content .trix-content div,
.legal-document-content .trix-content p,
.legal-document-content li {
  color: #c4c9d2;
}

.legal-document-content h1,
.legal-document-content h2,
.legal-document-content h3,
.legal-document-content strong {
  color: var(--dark-text);
}

.legal-document-footer {
  border-top-color: var(--dark-border);
}

.legal-document-footer p,
.legal-footer-email,
.legal-document-meta {
  color: var(--dark-muted);
}

.trix-content,
.legal-document,
.vehicle-details-description,
.vehicle-equipment-list {
  color: #d5d8df;
}

.trix-content h1,
.trix-content h2,
.trix-content h3,
.legal-document h1,
.legal-document h2,
.legal-document h3 {
  color: var(--dark-text);
}

.regular-hero-content-plain .regular-hero-title {
  color: var(--dark-text);
}

.regular-hero-content-plain .regular-hero-description,
.regular-back-link {
  color: var(--dark-muted);
}

.regular-article,
.regular-article .trix-content,
.regular-article .trix-content div,
.regular-article .trix-content p,
.regular-article .trix-content li,
.regular-article .trix-content blockquote {
  color: #d5d8df;
}

.regular-article {
  padding: 36px 40px;
  border: 1px solid var(--dark-border);
  border-radius: 16px;
  background-color: var(--dark-surface);
  box-shadow: 0 10px 30px rgb(0 0 0 / 20%);
}

.regular-article h1,
.regular-article h2,
.regular-article h3,
.regular-article h4,
.regular-article .trix-content h1,
.regular-article .trix-content h2,
.regular-article .trix-content h3,
.regular-article .trix-content h4,
.regular-article strong,
.regular-article b {
  color: var(--dark-text);
}

.regular-article a {
  color: var(--color-primary);
}

.regular-article a.regular-contact-primary,
.about-button-primary {
  color: #fff;
}

.regular-article a.regular-contact-secondary,
.about-button-secondary {
  color: var(--color-primary);
}

.regular-article blockquote {
  border-left-color: var(--dark-border);
}

.regular-article pre,
.regular-article code {
  color: #eef0f4;
  background-color: var(--dark-surface-raised);
}

.regular-contact {
  margin-top: 32px;
  padding-top: 0;
  border-top: 0;
}

.regular-contact-secondary {
  color: var(--dark-text);
  border-color: var(--dark-border);
  background-color: var(--dark-surface-raised);
}

.regular-contact-secondary:hover,
.regular-contact-secondary:focus-visible {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: var(--dark-surface-raised);
}

@media (max-width: 600px) {
  .regular-article {
    padding: 26px 22px;
    border-radius: 14px;
  }
}

.server-pagination .page-link,
.server-pagination .pagination a,
.server-pagination .pagination .previous_page,
.server-pagination .pagination .next_page {
  border-color: var(--dark-border);
  background-color: var(--dark-surface);
  color: var(--dark-text);
}

.server-pagination .page-link:hover,
.server-pagination .pagination a:hover {
  background-color: var(--dark-surface-raised);
}

.server-pagination .page-item.disabled .page-link,
.server-pagination .previous_page.disabled,
.server-pagination .next_page.disabled {
  border-color: var(--dark-border);
  background-color: var(--dark-page);
  color: var(--dark-muted);
}

/*  Embedded custom blocks on the home page. */

.block-page,
.block-content {
  color: var(--dark-text);
  background-color: var(--dark-page);
}

.block-container {
  width: 100%;
  max-width: none;
}

.block-hero-overlay {
  background:
    linear-gradient(180deg, rgb(5 7 10 / 72%), rgb(5 7 10 / 88%)),
    linear-gradient(90deg, rgb(5 7 10 / 30%), rgb(5 7 10 / 62%));
}

.block-hero-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  width: min(100% - 32px, 720px);
  height: 100%;
  margin-inline: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-self: center;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 18px rgb(0 0 0 / 75%);
}

.block-hero-title,
.block-hero-content-plain .block-hero-title {
  color: #fff;
}

.block-hero-description,
.block-hero-content-plain .block-hero-description {
  color: #c4cad4;
}

.block-hero-content-plain {
  position: relative;
  inset: auto;
  display: block;
  height: auto;
  text-shadow: none;
}

.block-article {
  padding: 36px 40px;
  color: #d5d8df;
  border: 1px solid var(--dark-border);
  border-radius: 16px;
  background-color: var(--dark-surface);
  box-shadow: 0 10px 30px rgb(0 0 0 / 20%);
}

.block-article,
.block-article .trix-content,
.block-article .trix-content div,
.block-article .trix-content p,
.block-article .trix-content li,
.block-article .trix-content blockquote {
  color: #d5d8df;
}

.block-article h1,
.block-article h2,
.block-article h3,
.block-article h4,
.block-article strong,
.block-article b {
  color: var(--dark-text);
}

.block-article a {
  color: var(--color-primary);
}

@media (max-width: 600px) {
  .block-article {
    padding: 26px 22px;
    border-radius: 14px;
  }
}

.offer-link {
  color: var(--dark-text);
}