/* ========================================
   BMW USA — Base Typography & Buttons
   Source: BUILD_PLAN §5 (Typography), §3.3 (Buttons)
   ======================================== */

/* ===== 5.1 Font Face Simulation ===== */
@font-face {
  font-family: 'BMWTypeNext';
  src: local('Helvetica Neue'), local('Helvetica'), local('Arial');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'BMWTypeNext';
  src: local('Helvetica Neue'), local('Helvetica'), local('Arial');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'BMWTypeNext';
  src: local('Helvetica Neue Bold'), local('Helvetica Bold'), local('Arial Bold');
  font-weight: 700;
  font-style: normal;
}

/* ===== Type Scale (BUILD_PLAN §5.2) ===== */

/* Eyebrow 1 */
.eyebrow,
.eyebrow-1 {
  font-size: var(--eyebrow-1-size);
  font-weight: var(--eyebrow-1-weight);
  letter-spacing: var(--eyebrow-1-ls);
  line-height: var(--eyebrow-1-lh);
  text-transform: uppercase;
  color: var(--bmw-light-text);
}

/* Eyebrow 2 */
.eyebrow-2 {
  font-size: var(--eyebrow-2-size);
  font-weight: var(--eyebrow-2-weight);
  letter-spacing: var(--eyebrow-2-ls);
  line-height: var(--eyebrow-2-lh);
  text-transform: uppercase;
}

/* Label 3 Bold */
.label-3--bold {
  font-size: var(--label-3-bold-size);
  font-weight: var(--label-3-bold-weight);
  line-height: var(--label-3-bold-lh);
}

/* Body Text */
.body-text {
  font-size: var(--body-text-size);
  font-weight: var(--body-text-weight);
  letter-spacing: var(--body-text-ls);
  line-height: var(--body-text-lh);
}

.body-default {
  font-size: var(--body-default-size);
  font-weight: var(--body-default-weight);
  line-height: var(--body-default-lh);
}

/* Headlines */
.headline-6 { font-size: var(--headline-6-size); font-weight: var(--headline-6-weight); }
.headline-5 { font-size: var(--headline-5-size); font-weight: var(--headline-5-weight); }
.headline-4 { font-size: var(--headline-4-size); font-weight: var(--headline-4-weight); }
.headline-3 { font-size: var(--headline-3-size); font-weight: var(--headline-3-weight); }
.headline-2 { font-size: var(--headline-2-size); font-weight: var(--headline-2-weight); }
.headline-1 { font-size: var(--headline-1-size); font-weight: var(--headline-1-weight); }

/* ===== Section Header Typography (BUILD_PLAN §5.3) ===== */
.section-header__copy {
  letter-spacing: 0.0333333333rem;
}

/* ===== 5.4 Eyebrow Styles ===== */

/* After-line variant */
.eyebrow--after-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.eyebrow--after-line::after {
  content: '';
  display: inline-block;
  width: 71px;
  height: 1px;
  border-bottom: 1px solid currentColor;
}

.eyebrow--after-line__short::after {
  width: 40px;
}

.eyebrow--after-line__full {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eyebrow--after-line__full::after {
  content: '';
  flex: 1;
  height: 1px;
  border-bottom: 1px solid currentColor;
}

/* Arrow variant */
.eyebrow--arrow::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(135deg);
  padding: 2px;
  margin-right: 6px;
}

/* Double Line variant */
.eyebrow--double-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eyebrow--double-line::before,
.eyebrow--double-line::after {
  content: '';
  width: 40px;
  height: 1px;
  border-bottom: 1px solid currentColor;
}

/* Numbered variant */
.eyebrow--numbered {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow--numbered::before {
  content: attr(data-number);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2.75px;
  line-height: 1;
}

.eyebrow--numbered--fill::before {
  background: var(--bmw-dark-text);
  color: var(--bmw-white);
}

.eyebrow--numbered--outline::before {
  border: 1px solid var(--bmw-dark-text);
  color: var(--bmw-dark-text);
}

/* ===== 3.3 Button System ===== */

/* Default dark link */
.cmp-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-size: var(--body-default-size);
  font-weight: 700;
  color: var(--bmw-dark-text);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  transition: color var(--transition-fast);
}

.cmp-button:hover {
  color: var(--bmw-button-hover);
}

/* Default dark link with underline on hover */
.cmp-button--link {
  position: relative;
}

.cmp-button--link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--bmw-button-hover);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}

.cmp-button--link:hover::after {
  transform: scaleX(1);
}

/* As-link style (border-bottom) */
.cmp-button--as-link {
  border-bottom: 1px solid var(--bmw-dark-text);
  padding-bottom: 2px;
}

.cmp-button--as-link:hover {
  border-bottom-color: var(--bmw-button-hover);
}

/* Box style */
.cmp-button--box {
  border: 1px solid var(--bmw-dark-text);
  padding: 18px 22px;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.cmp-button--box:hover {
  background: var(--bmw-dark-text);
  color: var(--bmw-white);
  border-color: var(--bmw-dark-text);
}

/* Rounded */
.cmp-button--rounded {
  border-radius: 30px;
}

/* Full-width */
.cmp-button--full-width {
  width: 100%;
  justify-content: center;
}

/* White variant (for dark backgrounds) */
.cmp-button--white {
  color: var(--bmw-white);
}

.cmp-button--white:hover {
  color: rgba(255, 255, 255, 0.7);
}

.cmp-button--box.cmp-button--white {
  border-color: var(--bmw-white);
}

.cmp-button--box.cmp-button--white:hover {
  background: var(--bmw-white);
  color: var(--bmw-dark-text);
}

/* Button with icon */
.cmp-button svg,
.cmp-button img {
  width: 16px;
  height: 16px;
}

/* External icon */
.cmp-button--external::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M7 7h10v10' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M7 7h10v10' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  background: currentColor;
}

/* ===== Link Styles ===== */
.link {
  color: var(--bmw-dark-text);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.link:hover {
  color: var(--bmw-button-hover);
}

.link--light {
  color: var(--bmw-light-text);
}

.link--white {
  color: var(--bmw-white);
}

.link--white:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* ===== List Styles ===== */
.list--unstyled {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ===== Spacer Classes (BUILD_PLAN §3.4) ===== */
.spacer-xx-small { height: var(--spacer-xx-small); }
.spacer-x-small  { height: var(--spacer-x-small); }
.spacer-small    { height: var(--spacer-small); }
.spacer-medium   { height: var(--spacer-medium); }
.spacer-large    { height: var(--spacer-large); }
.spacer-x-large  { height: var(--spacer-x-large); }
.spacer-xx-large { height: var(--spacer-xx-large); }

.spacer-xx-small--margin { margin-bottom: var(--spacer-xx-small); }
.spacer-x-small--margin  { margin-bottom: var(--spacer-x-small); }
.spacer-small--margin    { margin-bottom: var(--spacer-small); }
.spacer-medium--margin   { margin-bottom: var(--spacer-medium); }
.spacer-large--margin    { margin-bottom: var(--spacer-large); }
.spacer-x-large--margin  { margin-bottom: var(--spacer-x-large); }
.spacer-xx-large--margin { margin-bottom: var(--spacer-xx-large); }

@media (max-width: 767px) {
  .spacer-exclude-mobile { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .spacer-exclude-tablet { display: none; }
}

@media (min-width: 1024px) {
  .spacer-exclude-desktop { display: none; }
}

@media (min-width: 1280px) {
  .spacer-exclude-desktop-large { display: none; }
}

/* ===== Theme Classes (BUILD_PLAN §4.2) ===== */
.theme--light {
  background: linear-gradient(to bottom, var(--bmw-bg-light), var(--bmw-white));
  color: var(--bmw-light-text);
}

.theme--dark {
  color: var(--bmw-white);
}

.medium-font {
  color: var(--bmw-medium-text);
}

.dark-font {
  color: var(--bmw-dark-text);
}

.extra-gray-light {
  background: var(--bmw-bg-light-grey);
}

/* ===== Background Container (BUILD_PLAN §3.5) ===== */
.background {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.background .background-container {
  position: relative;
  width: 100%;
}

.background .background-container img,
.background .background-container picture {
  display: block;
  width: 100%;
  object-fit: cover;
}

@media (min-width: 1280px) {
  .background--short .background-container {
    aspect-ratio: auto;
    min-height: 34.375vh;
  }

  .background--tall .background-container {
    aspect-ratio: auto;
    min-height: 37.5vh;
  }
}