/* MaintenanceSpec shared typography, color and contrast system.
   Visual layer only: no layout, routing, content or SEO structure changes.
   Loaded last on every page so it normalises type scale and contrast
   across the homepage, vehicle pages, make hubs, guides and support pages. */

:root {
  --ms-navy: #06172B;
  --ms-navy-2: #0A2342;
  --ms-blue: #1677FF;
  --ms-cta: #0F6FFF;
  --ms-cta-hover: #2B83FF;
  /* Accessible variants of the brand blue: same hue, >=4.5:1 on white,
     soft blue and page background. Used for text, links and button fills. */
  --ms-cta-accessible: #0B62E8;
  --ms-cta-accessible-hover: #0A5BD3;
  --ms-text: #06172B;
  --ms-body: #526174;
  --ms-secondary: #637083;
  --ms-muted: #6F7F93;
  --ms-background: #F7F9FC;
  --ms-soft-blue: #EEF4FF;
  --ms-border: #D8E5FF;
  --ms-border-strong: #C5D8F7;
  --ms-white: #FFFFFF;
  --ms-dark-card: #0D2747;
  --ms-body-size: 17px;
  --ms-body-mobile: 16px;

  /* Align the legacy token names with the locked palette so existing
     components inherit the same colours without markup changes. */
  --ink: #06172B;
  --ink-soft: #526174;
  --line: #D8E5FF;
  --bg: #F7F9FC;
  --primary: #0B62E8;
  --primary-hover: #0A5BD3;
  --primary-soft: #EEF4FF;
  --primary-soft-border: #D8E5FF;
  --dark: #06172B;
}

/* ---------- base ---------- */

body {
  color: var(--ms-text);
  font-size: var(--ms-body-mobile);
  line-height: 1.6;
}

@media (min-width: 768px) {
  body { font-size: var(--ms-body-size); }
}

/* ---------- headings ---------- */

h1:not(.hero-h) {
  color: var(--ms-text);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  font-size: clamp(34px, 7.4vw, 40px);
}

h2 {
  color: var(--ms-text);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.16;
  font-size: clamp(26px, 6vw, 30px);
}

h3 {
  color: var(--ms-text);
  font-weight: 700;
  line-height: 1.25;
  font-size: clamp(19px, 4.6vw, 21px);
}

@media (min-width: 768px) {
  h1:not(.hero-h) { font-size: clamp(42px, 4.4vw, 50px); }
  h2 { font-size: clamp(30px, 2.6vw, 34px); }
  h3 { font-size: 21px; }
}

@media (min-width: 1200px) {
  h1:not(.hero-h) { font-size: 52px; }
  h2 { font-size: 34px; }
  h3 { font-size: 22px; }
}

/* ---------- body copy and measure ---------- */

.page-section p,
.guide-section p,
.guide-answer p,
.guide-faq-answer p,
.info-card p,
.vp-section p,
.hub-intro p,
main p {
  color: var(--ms-body);
  line-height: 1.6;
  font-size: var(--ms-body-mobile);
}

@media (min-width: 768px) {
  .page-section p,
  .guide-section p,
  .guide-answer p,
  .guide-faq-answer p,
  .info-card p,
  .vp-section p,
  .hub-intro p,
  main p { font-size: var(--ms-body-size); }
}

.page-section p,
.guide-section p,
.guide-answer p,
.guide-faq-answer p,
.page-section li,
.guide-section li {
  max-width: 72ch;
}

.page-section > .wrap > p,
.guide-intro p { max-width: 74ch; }

/* ---------- eyebrows and labels ---------- */

.eyebrow-tag,
.eyebrow,
.guide-eyebrow,
.vp-eyebrow,
.section-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ms-cta-accessible);
}

/* ---------- links ---------- */

.page-section a:not(.cta-btn):not(.guide-btn):not(.model-status),
.guide-section a:not(.guide-btn),
main a.text-link {
  color: var(--ms-cta-accessible);
  font-weight: 650;
}

.page-section a:not(.cta-btn):not(.guide-btn):not(.model-status):hover,
.guide-section a:not(.guide-btn):hover {
  color: var(--ms-cta-accessible-hover);
}

/* ---------- buttons ---------- */

.cta-btn,
.guide-btn,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 11px;
  background: var(--ms-cta-accessible);
  color: var(--ms-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* Prose link colors must not repaint button labels. */
.prose a.cta-btn,
.prose a.guide-btn,
.prose a.btn-primary { color: var(--ms-white); }

.cta-btn:hover,
.guide-btn:hover,
.btn-primary:hover { background: var(--ms-cta-accessible-hover); color: var(--ms-white); }

.cta-btn.secondary,
.guide-btn.secondary,
.btn-secondary {
  background: var(--ms-white);
  border: 1px solid var(--ms-border-strong);
  color: var(--ms-navy-2);
}

.cta-btn.secondary:hover,
.btn-secondary:hover { background: var(--ms-soft-blue); color: var(--ms-navy-2); }

/* ---------- navigation ---------- */

nav.main-nav a,
.nav-trigger {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--ms-navy-2);
}

nav.main-nav a:hover,
.nav-trigger:hover { color: var(--ms-cta-accessible); }

nav.main-nav a[aria-current="page"],
.nav-link.active { color: var(--ms-cta-accessible); }

.mobile-nav-link,
.mobile-nav-group summary { font-size: 16px; min-height: 48px; color: var(--ms-navy-2); }
.mobile-nav-sub a { font-size: 15px; min-height: 44px; color: var(--ms-body); }

.dropdown-panel a { color: var(--ms-navy-2); font-size: 14.5px; }
.dropdown-heading { color: var(--ms-secondary); }
.dropdown-featured-desc { color: var(--ms-body); font-size: 13px; }

/* ---------- announcement bar ---------- */

.announcement-bar,
.top-announcement {
  background: var(--ms-navy);
  color: var(--ms-white);
  font-size: 11.5px;
  line-height: 1.4;
}

.announcement-bar a,
.top-announcement a { color: var(--ms-white); font-weight: 700; }

@media (min-width: 768px) {
  .announcement-bar,
  .top-announcement { font-size: 12.5px; }
}

/* ---------- breadcrumbs ---------- */

.breadcrumbs,
.breadcrumb,
.vp-breadcrumbs,
.guide-breadcrumbs {
  font-size: 14px;
  line-height: 1.45;
}

.breadcrumbs a,
.breadcrumb a,
.vp-breadcrumbs a,
.guide-breadcrumbs a { color: var(--ms-secondary); font-weight: 600; }

.breadcrumbs a:hover,
.vp-breadcrumbs a:hover,
.guide-breadcrumbs a:hover { color: var(--ms-cta-accessible); }

.breadcrumbs [aria-current="page"],
.vp-breadcrumbs [aria-current="page"],
.guide-breadcrumbs [aria-current="page"] { color: var(--ms-text); font-weight: 700; }

@media (min-width: 768px) {
  .breadcrumbs, .breadcrumb, .vp-breadcrumbs, .guide-breadcrumbs { font-size: 15px; }
}

/* ---------- cards ---------- */

.info-card,
.guide-card,
.guide-related-card,
.vp-card {
  background: var(--ms-white);
  border-color: var(--ms-border);
}

.info-card h3,
.guide-card h3,
.guide-related-card h3,
.vp-card h3 { color: var(--ms-text); }

.info-card p,
.guide-card p,
.guide-related-card p,
.vp-card p {
  color: var(--ms-secondary);
  font-size: 15.5px;
  line-height: 1.5;
}

/* ---------- vehicle page metadata chips ---------- */

.vp-chip,
.vp-fact,
.meta-chip,
.chip {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ms-navy-2);
  background: var(--ms-soft-blue);
  border-color: var(--ms-border);
}

/* ---------- schedule tables ---------- */

.vp-table th,
table th {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--ms-navy-2);
}

.vp-table td,
table td {
  font-size: 15px;
  color: var(--ms-body);
  line-height: 1.5;
}

.vp-table td strong,
table td strong { color: var(--ms-text); font-weight: 700; }

.vp-table a,
table a { color: var(--ms-cta-accessible); font-weight: 650; }

/* ---------- mobile schedule cards ---------- */

.vp-mobile-card .vp-mobile-item { font-size: 18px; font-weight: 700; color: var(--ms-text); }
.vp-mobile-card .vp-mobile-timing { font-size: 15.5px; color: var(--ms-navy-2); }
.vp-mobile-card .vp-mobile-detail { font-size: 15px; color: var(--ms-body); }
.vp-mobile-card .vp-mobile-source { font-size: 13.5px; color: var(--ms-cta-accessible); }

/* ---------- FAQ ---------- */

.guide-faq-item summary,
.vp-faq summary,
.faq-question {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--ms-text);
  line-height: 1.35;
}

.guide-faq-answer,
.vp-faq-answer,
.faq-answer {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ms-body);
}

@media (min-width: 768px) {
  .guide-faq-item summary, .vp-faq summary, .faq-question { font-size: 19px; }
  .guide-faq-answer, .vp-faq-answer, .faq-answer { font-size: 16.5px; }
}

/* ---------- source cards ---------- */

.vp-source-card .vp-source-owner,
.source-owner { font-size: 14.5px; font-weight: 750; color: var(--ms-navy-2); }
.vp-source-card .vp-source-title,
.source-title { font-size: 16px; font-weight: 700; color: var(--ms-text); }
.vp-source-card p,
.source-detail { font-size: 14.5px; color: var(--ms-body); }
.vp-source-card a,
.source-link { font-size: 14.5px; color: var(--ms-cta-accessible); font-weight: 650; }

/* ---------- make hubs and empty states ---------- */

.hub-empty-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hub-empty-actions a { min-height: 46px; }

.model-list-row {
  font-size: 16px;
  color: var(--ms-text);
}

.model-status.available { color: var(--ms-cta-accessible); font-weight: 700; }

/* ---------- footer ---------- */

.site-footer h3,
.site-footer .site-footer-col strong,
.site-footer-col-title { font-size: 13.5px; font-weight: 750; }

.site-footer a { font-size: 14.5px; }
.site-footer-legal,
.site-footer-copy,
.site-footer-disclaimer { font-size: 12.5px; line-height: 1.5; }

/* Dark footer variants keep an accessible secondary tone. */
.site-footer.dark,
.footer-dark { color: var(--ms-white); }
.site-footer.dark a,
.footer-dark a { color: #D6E3F5; }
.site-footer.dark .site-footer-legal,
.footer-dark .site-footer-legal { color: #B8C6D8; }

/* ---------- tap targets ---------- */

@media (max-width: 767px) {
  .page-section a.cta-btn,
  .guide-btn,
  .hub-empty-actions a { min-height: 46px; }
}

/* Eyebrows inside dark panels keep the light blue tone and no chip fill. */
.final-finder-shell .eyebrow-tag,
.schedule-status .section-heading span,
[class*="dark"] .eyebrow-tag {
  background: transparent;
  color: #7FB2FF;
}

/* Small status pills stay readable on their tinted backgrounds. */
.status-tag.review { color: #8A5A00; }

/* ---------- readability floors ----------
   Visual-only sizing: raises text that fell below the readable minimum
   without changing layout structure or copy. */

main p,
.prose p,
.page-section p,
.page-hero p,
.hero-sub,
.model-hero-sub,
.guide-answer p,
.vp-section p {
  font-size: 16px !important;
  line-height: 1.65;
}

.section-sub,
.mobile-sources-intro,
.info-card span,
.guide-card span,
.vehicle-card__body p,
.status-empty {
  font-size: 14px !important;
  line-height: 1.55;
}

.ms-schedule-card__link,
.ms-schedule-card__years,
.source-link,
.resources-all,
.card-arrow {
  font-size: 13.5px !important;
}

.model-status,
.status-tag,
.sched-status-pill,
.ms-find-schedule-card__eyebrow,
.mobile-eyebrow,
.announcement-bar__mobile-copy,
.label,
.vehicle-filter span {
  font-size: 12px !important;
}

@media (min-width: 1024px) {
  main p,
  .prose p,
  .page-section p,
  .page-hero p,
  .model-hero-sub,
  .vp-section p {
    font-size: 17px !important;
  }
}

/* Keep compact card and table cells legible but unchanged in structure. */
table td,
table th,
.vp-mobile-card p {
  font-size: 14px !important;
}

/* Final small-label floor: nothing meaningful renders below 12px. */
.ms-mobile-tagline,
.section-heading > span,
.model-source-primary__text small,
.ms-faq-topic-card strong {
  font-size: 12px !important;
}

/* ---- Central maintenance media (thumbnails + editorial images) ---- */
.ms-thumb{display:block; width:84px; height:84px; border-radius:14px; overflow:hidden; background:#EEF4FF; flex-shrink:0;}
.ms-thumb img{display:block; width:100%; height:100%; object-fit:cover;}
.maintenance-guide-card .ms-thumb{width:84px; height:84px;}
.ms-editorial{margin:22px 0; border-radius:16px; overflow:hidden; background:#EEF4FF;}
.ms-editorial img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;}
.info-card .ms-thumb{width:72px; height:72px; border-radius:14px;}
@media (max-width:767px){
  .ms-thumb{width:72px; height:72px;}
  .maintenance-guide-card .ms-thumb{width:72px; height:72px;}
  .ms-editorial{margin:18px 0; border-radius:14px;}
}
.info-card.has-thumb{display:grid; grid-template-columns:72px minmax(0,1fr); gap:14px; align-items:center;}
.info-card.has-thumb .info-card-text{display:block; min-width:0;}
.info-card.has-thumb .info-card-text strong{display:block; margin-bottom:4px;}
.info-card.has-thumb .info-card-text span{display:block;}
@media (min-width:768px){ .info-card.has-thumb .ms-thumb{width:84px; height:84px;} .info-card.has-thumb{grid-template-columns:84px minmax(0,1fr);} }
.search-result-card__thumb{display:block; width:56px; height:56px; border-radius:12px; overflow:hidden; background:#EEF4FF; flex-shrink:0;}
.search-result-card__thumb img{display:block; width:100%; height:100%; object-fit:cover;}
@media (min-width:768px){ .search-result-card__thumb{width:64px; height:64px;} }

/* ---- Central vehicle media (shared across cards, hubs, search) ---- */
.ms-vehicle-media{display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:16/9; background:#F5F8FE; border-radius:12px; overflow:hidden;}
.ms-vehicle-media img{display:block; width:100%; height:100%; object-fit:contain; background:transparent; mix-blend-mode:multiply;}
.ms-vehicle-media.is-pending{flex-direction:column; gap:4px; background:#EEF4FF; color:#3B5BA9;}
.ms-vehicle-media__glyph{width:44%; max-width:64px; height:auto; opacity:.55;}
.ms-vehicle-media__label{font-size:11px; font-weight:600; letter-spacing:.01em; color:#3B5BA9;}
.ms-vehicle-media--thumb{width:64px; aspect-ratio:16/9; border-radius:10px; flex-shrink:0;}
.ms-vehicle-media--thumb .ms-vehicle-media__label{font-size:9px;}
.ms-schedule-card__image .ms-vehicle-media{border-radius:0;}
@media (min-width:768px){ .ms-vehicle-media--thumb{width:96px;} }
.model-list-row strong{flex:1; min-width:0;}
.search-result-card__thumb--vehicle{width:64px; height:36px; border-radius:8px; background:#FFFFFF;}
.search-result-card__thumb--vehicle img{object-fit:contain;}
.info-card.vehicle-info-card .ms-vehicle-media--thumb{width:100%; max-width:140px; margin-bottom:8px;}

/* Resource rows use real photography thumbnails at a fixed box. */
.ms-thumb--resource{width:56px; height:56px; border-radius:12px; flex-shrink:0;}
.ms-thumb--resource img{width:100%; height:100%; object-fit:cover;}
@media (min-width:768px){ .ms-thumb--resource{width:64px; height:64px;} }

/* ---------- Global desktop container system ----------
   One shared content container for every page and section. Vehicle pages
   already used a 1200px measure; the rest of the site inherited a 1440px
   wrap, which produced inconsistent desktop widths, over-wide long-form
   text and stretched grids. Mobile (<768px) is intentionally untouched. */
@media (min-width: 768px) {
  .wrap,
  .site-container {
    width: min(calc(100% - 48px), 1200px);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }
}

@media (min-width: 1440px) {
  .wrap,
  .site-container {
    width: min(calc(100% - 64px), 1280px);
  }
}

/* Grid and flex children that hold text must be allowed to shrink so long
   words, tables and code never force a neighbouring column into a strip. */
@media (min-width: 768px) {
  .wrap > .grid > *,
  .info-grid > *,
  .guide-cards > *,
  .guide-related-grid > *,
  .card-grid > * {
    min-width: 0;
  }
}

/* Shared section rhythm: no oversized vertical gaps on desktop. */
@media (min-width: 768px) {
  .site-section { padding-block: 52px; }
}
@media (max-width: 767px) {
  .site-section { padding-block: 36px; }
}


/* ---------- Mobile touch targets ----------
   Every interactive control keeps a 44px activation height on touch widths.
   Visual size is unchanged; the extra area comes from padding. */
@media (max-width: 767px) {
  .breadcrumbs ol li a,
  .breadcrumbs ol li[aria-current] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .guide-chip,
  .faq-topic-chip,
  .schedule-filter,
  .ms-make-filter__item,
  .sched-expand-all,
  .site-footer-col a,
  .site-footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .vehicle-page select,
  .vehicle-page input,
  .final-finder select,
  .final-finder input,
  select,
  input[type="text"],
  input[type="search"],
  input[type="date"],
  input[type="number"] {
    min-height: 44px;
  }
  button,
  .cta-btn,
  .admin-btn {
    min-height: 44px;
  }
}


/* Controls with page-level rules of higher specificity still need the 44px
   activation height on touch widths, so the floor is enforced here. */
@media (max-width: 767px) {
  .model-meta-chip select,
  .model-meta-chip input,
  .vehicle-page select,
  .vehicle-page input,
  .final-finder select,
  .final-finder input,
  select,
  input[type="text"],
  input[type="search"],
  input[type="date"],
  input[type="number"],
  button,
  summary,
  .site-logo,
  .faq-q,
  .faq-item button,
  .guide-chip,
  .faq-topic-chip,
  .schedule-filter,
  .ms-make-filter__item,
  .footer-logo,
  .model-status {
    min-height: 44px !important;
  }
}

/* ---------- /sources/ document list ---------- */
.source-doc-list{display:grid;gap:10px;margin:0 0 22px}
.source-doc-item{display:block;background:#fff;border:1px solid #D8E5FF;border-radius:12px;padding:14px 16px}
.source-doc-item strong{display:block;font-size:14.5px;line-height:1.35}
.source-doc-item span{display:block;color:#637083;font-size:12.5px;margin-top:4px}
.source-doc-vehicle{margin:0;font-size:15px;line-height:1.3;font-weight:700}
.source-doc-title{margin:3px 0 0;font-size:14px;line-height:1.4;color:#1E2A3B}
.source-doc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 18px;margin:10px 0 0}
.source-doc-meta div{min-width:0}
.source-doc-meta dt{margin:0;font-size:11.5px;letter-spacing:.02em;text-transform:uppercase;color:#8A97A8}
.source-doc-meta dd{margin:1px 0 0;font-size:12.5px;line-height:1.4;color:#415064;overflow-wrap:anywhere}
.source-doc-link{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:#1A56DB}
.source-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.source-filter-chip{font:inherit;font-size:13px;line-height:1;padding:9px 14px;min-height:38px;border-radius:999px;border:1px solid #D8E5FF;background:#fff;color:#415064;cursor:pointer}
.source-filter-chip.is-active{background:#1A56DB;border-color:#1A56DB;color:#fff}
@media (max-width:767px){.source-doc-item{min-height:44px}.source-doc-meta{grid-template-columns:1fr 1fr}}