@import url('brand.css');

/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
  /* nav heights (fixed header: mobile bar + search toggle; desktop: utility + main + search rows) */
  --nav-height: 208px;
  --header-height: var(--nav-height);
}

/*
 * fallback fonts tuned to the web fonts' text width and vertical metrics (measured against
 * Arial-metric fonts) so the swap keeps the same line breaks; bold uses a real bold face
 */
@font-face {
  font-family: libre-franklin-fallback;
  font-weight: 100 600;
  size-adjust: 102.14%;
  ascent-override: 94.58%;
  descent-override: 24.09%;
  line-gap-override: 0%;
  src: local('Arial'), local('ArialMT'), local('Arimo'), local('Liberation Sans');
}

@font-face {
  font-family: libre-franklin-fallback;
  font-weight: 700 900;
  size-adjust: 102.12%;
  ascent-override: 94.59%;
  descent-override: 24.09%;
  line-gap-override: 0%;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Arimo Bold'), local('Arimo-Bold'), local('Liberation Sans Bold');
}

@font-face {
  font-family: archivo-narrow-fallback;
  font-weight: 100 600;
  size-adjust: 83.48%;
  ascent-override: 123.99%;
  descent-override: 37.38%;
  line-gap-override: 0%;
  src: local('Arial'), local('ArialMT'), local('Arimo'), local('Liberation Sans');
}

@font-face {
  font-family: archivo-narrow-fallback;
  font-weight: 700 900;
  size-adjust: 83.48%;
  ascent-override: 123.99%;
  descent-override: 37.38%;
  line-gap-override: 0%;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Arimo Bold'), local('Arimo-Bold'), local('Liberation Sans Bold');
}

body {
  display: none;
  margin: 0;
  background-color: var(--page-background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  line-height: 1.6;
}

body.appear {
  display: block;
}

header {
  height: var(--header-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

/* breakpoint-exception: source header switches to desktop above 64em (1024px) */
@media (width >= 1025px) {
  :root {
    --nav-height: 223px;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.83em;
  color: var(--text-color);
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  line-height: 1.375;
  scroll-margin: calc(var(--header-height) + 16px);
}

h1 {
  font-size: var(--heading-font-size-xxl);
  font-weight: var(--display-font-weight);
}

h2 { font-size: var(--heading-font-size-xl); }
h3 { font-size: var(--heading-font-size-l); }
h4 { font-size: var(--heading-font-size-m); }
h5 { font-size: var(--heading-font-size-s); }
h6 { font-size: var(--heading-font-size-xs); }

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 1em;
  margin-bottom: 1em;
}

code,
pre {
  font-size: var(--body-font-size-s);
}

pre {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

input,
textarea,
select,
button {
  font: inherit;
}

/* links */
a:any-link {
  color: var(--link-color);
  text-decoration: underline;
  word-break: break-word;
  transition: color 0.3s, background-color 0.3s, border 0.3s;
}

a:hover,
a:focus {
  color: var(--link-hover-color);
  text-decoration: none;
}

/* buttons: EDS reset, then the source's single button style (blue, inverts on hover) */
main .button-container {
  display: inline;
}

main a.button:any-link {
  background: none;
  border: none;
  border-radius: 0;
  color: var(--link-color);
  font-size: inherit;
  font-weight: inherit;
  padding: 0;
  margin: 0;
  text-decoration: underline;
  white-space: normal;
}

main .default-content-wrapper a.button:any-link,
main a.button.primary:any-link {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  padding: 4px 24px;
  border: 1px solid var(--brand-blue);
  border-radius: 5px;
  background-color: var(--brand-blue);
  color: #fff;
  font-family: var(--body-font-family);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}

main .default-content-wrapper a.button:hover,
main .default-content-wrapper a.button:focus,
main a.button.primary:hover,
main a.button.primary:focus {
  background-color: var(--button-hover-background);
  color: var(--brand-blue);
}

button {
  cursor: pointer;
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* page frame: white 1200px content column on a light-grey page */
main {
  max-width: var(--content-max-width);
  margin: 0 auto;
  background-color: var(--background-color);
}

main > .section {
  margin: 0;
  padding: 0;
}

main > .section > div {
  max-width: var(--content-max-width);
  margin: auto;
  padding: 0 var(--content-inset);
  box-sizing: border-box;
}

main > .section > .default-content-wrapper:has(> h2:first-child) {
  padding-top: var(--section-padding);
}

/* page title (subpages): the source sets it in the book weight, not the hero's bold;
   30px on phones, 32px from its 48em (768px) grid */
main > .section > .default-content-wrapper > h1 {
  margin: 12px 0 8px;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.375;
}

/* breakpoint-exception: the source subpage title steps up at 768px */
@media (width >= 768px) {
  main > .section > .default-content-wrapper > h1 {
    font-size: var(--heading-font-size-xxl);
    line-height: 44px;
  }
}

/* breadcrumb (metadata breadcrumbs: true), desktop only like the source */
main nav.breadcrumbs {
  display: none;
}

/* breakpoint-exception: the source shows its breadcrumb from the desktop header breakpoint (1025px) */
@media (width >= 1025px) {
  main nav.breadcrumbs {
    display: block;
  }
}

main nav.breadcrumbs ol {
  margin: 0;
  padding: 10px 0 3px;
  list-style: none;
}

main nav.breadcrumbs li {
  display: inline-block;
  color: var(--breadcrumb-color);
  font-size: var(--body-font-size-s);
  line-height: 1.6;
}

main nav.breadcrumbs li + li::before {
  content: '›';
  margin: 0 7px;
}

main nav.breadcrumbs a:any-link {
  color: var(--text-color);
  text-decoration: none;
}

main nav.breadcrumbs a:hover,
main nav.breadcrumbs a:focus-visible {
  text-decoration: underline;
}

/* media center: list sections (style "half" pairs and the downloads section) */
main > .section.half,
main > .section.cards-downloads-container {
  padding: 32px 0 0;
}

main > .section.half > div,
main > .section.cards-downloads-container > div {
  padding: 0 32px;
}

/* the "VIEW ALL ..." button under each list */
main > .section.half > .default-content-wrapper:last-child,
main > .section.cards-downloads-container > .default-content-wrapper:last-child {
  padding-top: 16px;
  padding-bottom: 16px;
  text-align: center;
}

main > .section.half > .default-content-wrapper:last-child p,
main > .section.cards-downloads-container > .default-content-wrapper:last-child p {
  margin: 0;
}

main > .section.half > .default-content-wrapper:has(> h2:first-child),
main > .section.cards-downloads-container > .default-content-wrapper:has(> h2:first-child) {
  padding-top: 0;
}

main > .section.half h2,
main > .section.cards-downloads-container h2 {
  margin-bottom: 23px;
  font-family: var(--condensed-font-family);
  font-size: var(--heading-font-size-xxl-condensed);
  font-weight: 500;
  line-height: 1.375;
}

main > .section.cards-downloads-container {
  padding-bottom: 32px;
}

/* breakpoint-exception: the source puts the two lists side by side from 1025px (its md grid) */
@media (width >= 1025px) {
  main:has(> .section.half) {
    display: grid;
    grid-template-columns: 25px 1fr 1fr 39px;
  }

  main:has(> .section.half) > * {
    grid-column: 1 / -1;
  }

  /* the space above sits outside the divider, which starts at the headings like the source */
  main > .section.half {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
    padding-top: 0;
  }

  main > .section.half:has(+ .section.half) {
    grid-column: 2;
    border-right: 1px solid var(--divider-color);
  }

  main > .section.half + .section.half {
    grid-column: 3;
  }

  /* no auto margins here: in the column flexbox they would spread the free space between children */
  main > .section.half > div {
    width: 100%;
    margin: 0;
    padding: 0 16px;
  }

  /* buttons line up at the bottom of both columns, right-aligned */
  main > .section.half > .default-content-wrapper:last-child {
    margin-top: auto;
    text-align: right;
  }

  main > .section.cards-downloads-container > div {
    padding: 0 55px 0 41px;
  }

  main > .section.cards-downloads-container > .default-content-wrapper:last-child {
    padding-right: 87px;
    text-align: right;
  }
}

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);
  padding: var(--section-padding) 0;
}

main .section.dark {
  background-color: var(--dark-color);
  color: #fff;
  padding: var(--section-padding) 0;
}

main .section.dark a:any-link {
  color: #fff;
}

/* red band (e.g. Where To Buy / Buy Online) */
main .section.red {
  background-color: var(--brand-red);
  color: #fff;
  padding: 16px 0 24px;
}

main .section.red h1,
main .section.red h2,
main .section.red h3,
main .section.red h4 {
  color: #fff;
}

main .section.red a:any-link:not(.button) {
  color: #fff;
}

/* promo band: the source's top-to-bottom red gradient (performance membership banner) */
main .section.red-gradient {
  background: linear-gradient(to bottom, var(--promo-gradient-top), var(--brand-red));
  color: #fff;
  padding: 16px 0;
}

main .section.red-gradient a:any-link:not(.button) {
  color: #fff;
}

/* thin grey rule under the section, inset to the content width */
main .section.divider::after {
  content: '';
  display: block;
  box-sizing: border-box;
  width: calc(100% - 2 * var(--content-inset));
  max-width: calc(var(--content-max-width) - 2 * var(--content-inset));
  margin: 22px auto 0;
  border-bottom: 1px solid var(--rule-color);
}

/* blue uppercase section headings (about us: tagline and "Aftermarket parts for all makes") */
/* stylelint-disable-next-line no-descending-specificity -- different elements from the earlier rules */
main .section.blue-headings .default-content-wrapper > h2 {
  margin: 20px 0;
  color: var(--link-color);
  font-family: var(--heading-font-family);
  font-size: var(--heading-font-size-xl);
  font-weight: 600;
  line-height: 1.375;
  text-transform: uppercase;
}

/* condensed section headings (warranty: "Extended Warranty Coverage") */
/* stylelint-disable-next-line no-descending-specificity -- different elements from the earlier rules */
main .section.condensed-headings .default-content-wrapper > h2 {
  margin: 20px 0;
  font-family: var(--condensed-font-family);
  font-size: var(--heading-font-size-xl);
  font-weight: var(--condensed-font-weight);
  line-height: 1.375;
}

/* FAQ questions: bold body-font headings with room between the answers */
/* stylelint-disable-next-line no-descending-specificity -- different elements from the earlier rules */
main .section.bold-headings .default-content-wrapper > h2 {
  margin: 48px 0 18px;
  padding: 9px 0;
  font-family: var(--body-font-family);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

main .section.bold-headings .default-content-wrapper > h2:first-child {
  margin-top: 0;
}

/* the heading's own margin is the gap under the previous section (no extra section padding) */
main > .section.blue-headings > .default-content-wrapper:has(> h2:first-child),
main > .section.bold-headings > .default-content-wrapper:has(> h2:first-child) {
  padding-top: 0;
}

/* smaller notes after a block (warranty: the footnotes under the table) */
/* stylelint-disable-next-line no-descending-specificity -- different elements from the earlier rules */
main .section.footnotes > div:not(.default-content-wrapper) ~ .default-content-wrapper p {
  margin: 14.4px 0;
  font-size: 14.4px;
  line-height: 1.6;
}

/* a plain list flowed into columns (about us: the makes TRP covers) */
main .section.list-columns .default-content-wrapper > ul {
  padding: 0;
  list-style: none;
  column-count: 2;
}

main .section.list-columns .default-content-wrapper > ul > li {
  break-inside: avoid;
}

/* breakpoint-exception: the source list has 3 columns from 768px and 4 above 1024px */
@media (width >= 768px) {
  main .section.list-columns .default-content-wrapper > ul {
    column-count: 3;
  }
}

@media (width >= 1025px) {
  main .section.list-columns .default-content-wrapper > ul {
    column-count: 4;
  }
}

main .section.centered {
  text-align: center;
}

/* page header band (deals): left-to-right red gradient, title and intro in a 650px column */
main .section.red-dark-gradient {
  margin-bottom: 16px;
  background: linear-gradient(to right, var(--header-band-start), var(--header-band-end));
  color: #fff;
}

/* stylelint-disable-next-line no-descending-specificity -- different elements from the earlier rules */
main .section.red-dark-gradient > .default-content-wrapper {
  max-width: 650px;
  padding: 0;
}

main .section.red-dark-gradient h1 {
  margin: 0;
  padding-top: 40px;
  color: #fff;
  font-family: var(--condensed-font-family);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.375;
  text-transform: uppercase;
}

/* stylelint-disable-next-line no-descending-specificity -- different elements from the earlier rules */
main .section.red-dark-gradient p {
  margin: 0;
  padding-bottom: 40px;
  font-size: var(--body-font-size-s);
  line-height: 1.6;
}

/* stylelint-disable-next-line no-descending-specificity -- different elements from the earlier rules */
main .section.red-dark-gradient a:any-link {
  color: #fff;
}

/* breakpoint-exception: the source sets the band title at 40px from its 48em (768px) grid */
@media (width >= 768px) {
  main .section.red-dark-gradient {
    margin-bottom: 0;
  }

  main .section.red-dark-gradient h1 {
    font-size: 40px;
  }
}

/* deals: "SEE YOUR LOCAL OFFERS" is a red button centered under the deals list */
/* stylelint-disable-next-line no-descending-specificity -- different elements from the earlier rules */
main > .section.cards-deals-container > .default-content-wrapper:last-child {
  margin: 20px auto;
  text-align: center;
}

/* stylelint-disable-next-line no-descending-specificity -- different elements from the earlier rules */
main > .section.cards-deals-container > .default-content-wrapper:last-child p {
  margin: 0;
}

main > .section.cards-deals-container > .default-content-wrapper:last-child a.button:any-link {
  border-color: var(--link-hover-color);
  border-radius: 5px;
  background-color: var(--link-hover-color);
  color: #fff;
}

main > .section.cards-deals-container > .default-content-wrapper:last-child a.button:hover,
main > .section.cards-deals-container > .default-content-wrapper:last-child a.button:focus-visible {
  border-color: var(--button-red-hover);
  background-color: var(--button-red-hover);
  color: #fff;
}

/* breakpoint-exception: the list sits in the source's 9/12 results column from 768px */
@media (width >= 768px) {
  main > .section.cards-deals-container > .default-content-wrapper:last-child {
    padding-left: calc(25% + 16px);
  }
}