/**
 * MyMotorcycle block styling.
 *
 * File version: 2025-11-22_17-05
 * Change log:
 * - 2025-11-22 17:05 PST – Font and spacing tuning to better match D7:
 *   larger Oswald heading for the selected bike name, smaller grey
 *   uppercase link line below ("Change Motorcycle / Expand Details").
 * - 2025-11-22 16:45 PST – Updated selectors/layout to match actual
 *   markup (#block-dxpr-theme-mymotorcycle, #page-title container) and
 *   align Start Here + MyMotorcycle on the left.
 * - 2025-11-21 11:35 PST – Initial styling for MyMotorcycle title, note,
 *   and links.
 */

/* 1) Layout: Start Here + MyMotorcycle side-by-side on LEFT */

.page-title-full-width-container #page-title.page-title-container {
  display: flex;
  justify-content: flex-start;   /* keep items on the left */
  align-items: center;
}

/* Space between Start Here GIF block and MyMotorcycle block. */
#block-dxpr-theme-startheremotorcycleselector {
  margin-right: 24px;
}

/* Ensure MyMotorcycle block content is left-aligned. */
#block-dxpr-theme-mymotorcycle {
  text-align: left;
}

/* 2) Selected bike name – match D7 style */

#block-dxpr-theme-mymotorcycle .my-motorcycle-selected-name a,
#block-dxpr-theme-mymotorcycle .my-motorcycle-title a {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-decoration: none;
}

#block-dxpr-theme-mymotorcycle .my-motorcycle-selected-name,
#block-dxpr-theme-mymotorcycle .my-motorcycle-title {
  margin: 0;
}

/* Optional helper text when no bike is selected. */
#block-dxpr-theme-mymotorcycle .my-motorcycle-note {
  margin-top: 2px;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: #c8c8c8;
}

/* 3) Links line: "( Change Motorcycle ) Expand Details" style */

#block-dxpr-theme-mymotorcycle .my-motorcycle-links {
  margin-top: 2px;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #bfbfbf;
}

#block-dxpr-theme-mymotorcycle .my-motorcycle-links a {
  color: #bfbfbf;
  text-decoration: none;
}

#block-dxpr-theme-mymotorcycle .my-motorcycle-links a:hover {
  text-decoration: underline;
}

/* Make sure any embedded view output is left-aligned too. */
#block-dxpr-theme-mymotorcycle .view,
#block-dxpr-theme-mymotorcycle .view-content {
  text-align: left;
}

/* 4) Mobile: stack blocks vertically */

@media (max-width: 768px) {
  .page-title-full-width-container #page-title.page-title-container {
    flex-direction: column;
    align-items: flex-start;
  }

  #block-dxpr-theme-startheremotorcycleselector {
    margin-right: 0;
    margin-bottom: 8px;
  }

  #block-dxpr-theme-mymotorcycle {
    width: 100%;
  }
}