/* ============================================================
   TMG — MODEL LANDING PAGE BASE STYLESHEET
   Agency: The Moran Group
   Version: 1.4

   Shared foundation for all OEM model page templates.
   Brand-specific colors and fonts are defined in the brand
   stylesheet (e.g. toyota-brand.css, subaru-brand.css),
   which must be loaded after this file.

   TABLE OF CONTENTS:
   1.  CSS Custom Properties (Variables)
   2.  Base Reset & Global Styles
   3.  Typography
   4.  Utility Classes & Buttons
   5.  Layout Containers
   6.  Section: Hero
   7.  Section: What's New (Highlights)
   8.  Section: Trim Levels
   9.  Section: Safety Features
   10. Section: Color Options
   11. Section: Model Comparison Table
   12. Section: Inventory Widget
   13. Section: FAQ Accordion
   14. Section: Test Drive CTA
   15. Section: Legal Disclaimer
   16. Responsive — Tablet (max-width: 1024px)
   17. Responsive — Mobile (max-width: 767px)
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Brand Colors */
  --color-primary:      #e10a1d;   /* Toyota Red */
  --color-primary-dark: #b80818;   /* Hover state */
  --color-dark:         #111111;   /* Primary text */
  --color-gray:         #58595b;   /* Secondary text */
  --color-light-gray:   #f5f5f5;   /* Section backgrounds */
  --color-border:       #d8d8d8;   /* Borders, dividers */
  --color-white:        #ffffff;

  /* Typography — override --font-family in brand stylesheet */
  --font-family: 'Helvetica Neue', Arial, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.5;

  /* Spacing Scale */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  60px;
  --space-xxl: 80px;

  /* Section Padding */
  --section-padding-v: 64px;
  --section-padding-h: 24px;

  /* Max Widths */
  --container-max:       1200px;
  --container-narrow:    800px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-card:   0 2px 16px rgba(0, 0, 0, 0.09);
  --shadow-hover:  0 6px 24px rgba(0, 0, 0, 0.14);

  /* Transitions */
  --transition: 0.22s ease;
}


/* ============================================================
   2. BASE RESET & GLOBAL STYLES
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Ensure the HTML `hidden` attribute always wins over display rules */
[hidden] { display: none !important; }

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-dark);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition), opacity var(--transition);
}

a:hover {
  color: var(--color-primary-dark);
}

ul {
  list-style: none;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  line-height: 1.2;
  font-weight: 600;
  color: var(--color-dark);
}

h1 { font-size: clamp(28px, 4vw, 44px); }
h2 { font-size: clamp(26px, 3vw, 36px); }
h3 { font-size: clamp(20px, 2.5vw, 24px); }   /* was rem → 17.6px min at 16px DI root (below body!) */
h4 { font-size: 20px; }                         /* was 1.125rem → 18px = same as body, no hierarchy */

p {
  font-size: 18px;
  line-height: var(--line-height-base);
  color: var(--color-gray);
}

/* ── DI ENVIRONMENT FIX ────────────────────────────────────────────
   DI's page composer overrides html { font-size: 16px } after our
   stylesheet loads, breaking rem-based sizing inside .model-page.
   These rules use explicit px so DI cannot interfere.
   ─────────────────────────────────────────────────────────────── */
.model-page p,
.model-page li,
.model-page .section-subtitle,
.model-page .faq-answer,
.model-page .highlight-card p,
.model-page .safety-list li,
.model-page .trim-panel__features li,
.model-page .model-hero__intro,
.model-page .contact-form label,
.model-page .contact-form input,
.model-page .contact-form textarea,
.model-page .contact-form select {
  font-size: 18px;
  line-height: 1.7;
}

.section-title {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  color: var(--color-dark);
  text-align: center;
  margin-bottom: var(--space-sm);
}

.section-subtitle {
  font-size: 16px;
  color: var(--color-gray);
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-lg);
}

.section-title-line {
  display: block;
  width: 56px;
  height: 3px;
  background-color: var(--color-primary);
  margin: 12px auto var(--space-lg);
  border-radius: 2px;
}


/* ============================================================
   5. UTILITY CLASSES & BUTTONS
   ============================================================ */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
  white-space: nowrap;
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white) !important;
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white) !important;
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-primary) !important;
  border-color: var(--color-primary);
}

.btn--secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-white) !important;
}

.btn--white {
  background-color: var(--color-white);
  color: var(--color-primary) !important;
  border-color: var(--color-white);
}

.btn--white:hover {
  background-color: var(--color-light-gray);
  border-color: var(--color-light-gray);
}

.btn--outline-white {
  background-color: transparent;
  color: var(--color-white) !important;
  border-color: var(--color-white);
}

.btn--outline-white:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

/* Utility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-red    { color: var(--color-primary); }


/* ============================================================
   6. LAYOUT CONTAINERS
   ============================================================ */
.model-page {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  background-color: var(--color-white);
  overflow: hidden;
}

.model-page .container,
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--section-padding-h);
}

.model-page .container--narrow,
.container--narrow {
  max-width: var(--container-narrow);
}

.model-section {
  /* Vertical padding only — horizontal padding comes from the .container inside */
  padding: var(--section-padding-v) 0;
}

.model-section--light {
  background-color: var(--color-light-gray);
}

.model-section--dark {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.model-section--red {
  background-color: var(--color-primary);
  color: var(--color-white);
}


/* ============================================================
   7. HERO SECTION
   ============================================================ */
.model-hero {
  position: relative;
  width: 100%;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: #1a1a1a;
}

.model-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

/* Gradient overlay for text legibility */
.model-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.45) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
}

.model-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-xxl) var(--section-padding-h) var(--space-xl);
}

.model-hero__eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  background-color: rgba(255, 255, 255, 0.75);
  padding: 4px 12px;
  border-radius: 2px;
  margin-bottom: var(--space-sm);
}

.model-hero__title {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 700;
  color: var(--color-white);
  max-width: 680px;
  margin-bottom: var(--space-md);
  line-height: 1.1;
}

.model-hero__intro {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.88);
  max-width: 560px;
  margin-bottom: var(--space-lg);
  line-height: 1.7;
}

.model-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-stat__value {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
}

.hero-stat__label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-stat + .hero-stat {
  padding-left: var(--space-md);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}


/* ============================================================
   8. WHAT'S NEW (HIGHLIGHTS)
   ============================================================ */

/* Two-column intro: text left, video/image right.
   Below the intro the highlight cards span full width.
   On mobile everything stacks: text → media → cards.       */
.highlights-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);  /* 40px — desktop overrides to 52px; xl (60px) was too wide on mobile */
  align-items: center;
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .highlights-intro {
    grid-template-columns: 1fr 1fr;
    gap: 52px;
  }
}

/* Left-align heading, rule, and subtitle when inside the intro layout */
.highlights-intro__text .section-title {
  text-align: left;
}

.highlights-intro__text .section-title-line {
  margin-left: 0;
  margin-right: 0;
}

.highlights-intro__text .section-subtitle {
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Media container inside What's New */
.model-page .highlights-intro__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  background: var(--color-dark);
  line-height: 0;
  align-self: start; /* prevent grid stretch from making container taller than the image */
}

.model-page .highlights-intro__media video,
.model-page .highlights-intro__media iframe,
.model-page .highlights-intro__media img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 !important;
  padding: 0;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.model-page .highlights-intro__media-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;           /* override WordPress/DI default <p> margin-bottom */
  padding: 18px 16px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: center;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.highlight-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
}

.highlight-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.highlight-card__icon {
  width: 48px;
  height: 48px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.highlight-card__icon svg {
  width: 24px;
  height: 24px;
  fill: var(--color-white);
}

.highlight-card h3 {
  font-size: 20px;                /* was 1.125rem → 18px at 16px DI root = same as body, no hierarchy */
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-xs);
}

.highlight-card p {
  font-size: 17px;                /* was 0.9375rem → 15px at 16px DI root (below body text) */
  color: var(--color-gray);
  line-height: 1.6;
}


/* ============================================================
   9. TRIM LEVELS
   ============================================================ */
.trims-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-border);
  padding-bottom: var(--space-sm);
}

.trims-nav__btn {
  background: none;
  border: none;
  padding: 10px 22px;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-gray);
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--transition), background-color var(--transition);
  position: relative;
  bottom: -2px;
  border-bottom: 3px solid transparent;
}

.trims-nav__btn:hover {
  color: var(--color-primary);
  background-color: rgba(225, 10, 29, 0.05);
}

.trims-nav__btn.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.trim-panel {
  display: none;
}

.trim-panel.is-active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.trim-panel__image {
  background-color: transparent;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.trim-panel__image img {
  width: 100%;
  height: auto;
  max-height: 320px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.trim-panel__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: var(--space-sm);
}

.trim-panel__name {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 4px;
}

.trim-panel__price {
  font-size: 18px;
  color: var(--color-gray);
  margin-bottom: var(--space-md);
}

.trim-panel__price strong {
  color: var(--color-dark);
  font-size: 22px;
  font-weight: 700;
}

.trim-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.trim-spec {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trim-spec__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1;
}

.trim-spec__label {
  font-size: 11px;
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.trim-panel__features {
  margin-bottom: var(--space-lg);
}

.trim-panel__features li {
  font-size: 17px;
  color: var(--color-gray);
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.trim-panel__features li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

.trim-panel__features li:last-child {
  border-bottom: none;
}


/* ============================================================
   10. SAFETY FEATURES
   ============================================================ */
.safety-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.safety-text h2 {
  margin-bottom: var(--space-sm);
}

.safety-text > p {
  margin-bottom: var(--space-lg);
  font-size: 18px;
  line-height: 1.7;
}

.safety-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs) var(--space-md);
}

.safety-list li {
  font-size: 17px;
  color: var(--color-gray);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
}

.safety-list li::before {
  content: '\2713';
  color: var(--color-primary);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

.safety-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
}


/* ============================================================
   11. COLOR OPTIONS
   ============================================================ */
.colors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  cursor: default;
}

.color-swatch__chip {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}

.color-swatch:hover .color-swatch__chip {
  transform: scale(1.1);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-primary);
}

.color-swatch__name {
  font-size: 12px;
  color: var(--color-gray);
  text-align: center;
  line-height: 1.3;
  font-weight: 500;
}

/* Dual-tone badge */
.color-swatch--dual .color-swatch__chip {
  position: relative;
  overflow: hidden;
}

.color-swatch--dual .color-swatch__chip::after {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;
  background: inherit;
  filter: brightness(0.7);
}


/* ============================================================
   12. MODEL COMPARISON TABLE
   ============================================================ */
.comparison-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin-top: var(--space-lg);
}

.comparison-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background-color: var(--color-white);
  font-size: 15px;
}

.comparison-table th,
.comparison-table td {
  padding: 14px 20px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.comparison-table th {
  background-color: var(--color-dark);
  color: var(--color-white);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--color-dark);
  background-color: var(--color-light-gray);
  min-width: 160px;
}

.comparison-table th.col-highlight {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.comparison-table td.col-highlight {
  background-color: rgba(225, 10, 29, 0.04);
  font-weight: 600;
  color: var(--color-dark);
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table tr:hover td {
  background-color: var(--color-light-gray);
}

.comparison-table tr:hover td.col-highlight {
  background-color: rgba(225, 10, 29, 0.08);
}

.comparison-table tr:hover td:first-child {
  background-color: #ececec;
}

/* Check / X icons */
.check { color: #1a8c2e; font-size: 1.1em; }
.cross  { color: #b00716; font-size: 1.1em; }


/* ============================================================
   13. INVENTORY WIDGET
   ============================================================ */
.inventory-placeholder {
  background-color: var(--color-light-gray);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  color: var(--color-gray);
  font-size: 15px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* NOTE: The dashed border/placeholder message is for development only.
   Remove .inventory-placeholder styles and replace with the actual
   inventory widget code when implemented by the web maintenance team. */


/* ============================================================
   14. FAQ ACCORDION
   ============================================================ */
.faq-list {
  max-width: var(--container-narrow);
  margin: var(--space-lg) auto 0;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item:first-child {
  border-top: 1px solid var(--color-border);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: var(--space-md) 0;
  text-align: left;
  font-family: var(--font-family);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  transition: color var(--transition);
}

.faq-question:hover {
  color: var(--color-primary);
}

.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background-color: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}

.faq-icon::before {
  /* Horizontal bar */
  width: 14px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq-icon::after {
  /* Vertical bar */
  width: 2px;
  height: 14px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Standalone files: button[aria-expanded] controls the expanded state */
.faq-question[aria-expanded="true"] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-question[aria-expanded="true"] {
  color: var(--color-primary);
}

/* DI-ready files: <details>/<summary> — browser manages open/closed natively.
   Hide the default disclosure triangle on <summary> elements. */
summary.faq-question {
  list-style: none;
}
summary.faq-question::-webkit-details-marker {
  display: none;
}

/* Expanded state for <details>-based FAQ (DI-ready files) */
details.faq-item[open] .faq-question {
  color: var(--color-primary);
}
details.faq-item[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-answer {
  padding: 0 0 var(--space-md);
  font-size: 17px;
  color: var(--color-gray);
  line-height: 1.7;
}

.faq-answer p + p {
  margin-top: var(--space-sm);
}

/* Standalone: answers hidden by default, shown via .is-open class */
.faq-answer {
  display: none;
}
.faq-answer.is-open {
  display: block;
}

/* DI-ready: answers shown when parent <details> is open */
details.faq-item[open] .faq-answer {
  display: block;
}


/* ============================================================
   15. TEST DRIVE CTA
   ============================================================ */
.model-cta {
  background-color: var(--color-primary);
  padding: var(--section-padding-v) var(--section-padding-h);
  text-align: center;
}

.model-cta .container {
  max-width: var(--container-narrow);
}

.model-cta h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.model-cta p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
  max-width: 540px;
  margin: 0 auto var(--space-lg);
}

.cta-dealer-info {
  margin-bottom: var(--space-lg);
}

.cta-dealer-info p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 4px;
}

.cta-dealer-info a {
  color: var(--color-white);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cta-dealer-info a:hover {
  opacity: 0.85;
  color: var(--color-white);
}

.model-cta .btn-group {
  justify-content: center;
}


/* ============================================================
   16. LEGAL DISCLAIMER
   ============================================================ */
.model-disclaimer {
  padding: var(--space-xl) var(--section-padding-h);
  background-color: var(--color-light-gray);
}

.disclaimer-text {
  font-size: 12px;
  color: var(--color-gray);
  line-height: 1.7;
  max-width: var(--container-max);
  margin: 0 auto;
}

.disclaimer-text + .disclaimer-text {
  margin-top: var(--space-sm);
}


/* ============================================================
   17. RESPONSIVE — TABLET (max-width: 1024px)
   ============================================================ */
@media screen and (max-width: 1024px) {
  :root {
    --section-padding-v: 48px;
  }

  .highlights-grid {
    grid-template-columns: 1fr 1fr;
  }

  .trim-panel.is-active {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .trim-panel__image {
    max-width: 540px;
    margin: 0 auto;
  }

  .safety-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .safety-image {
    order: -1;
    max-width: 560px;
    margin: 0 auto;
  }

  .colors-grid {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  }
}


/* ============================================================
   18. RESPONSIVE — MOBILE (max-width: 767px)
   ============================================================ */
@media screen and (max-width: 767px) {
  :root {
    --section-padding-v: 40px;
    --section-padding-h: 16px;
  }

  /* Hero */
  .model-hero {
    min-height: 420px;
    align-items: flex-end;
  }

  .model-hero__overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.35) 60%,
      rgba(0, 0, 0, 0.1) 100%
    );
  }

  .model-hero__content {
    padding: var(--space-xl) var(--section-padding-h) var(--space-lg);
  }

  .model-hero__title {
    font-size: clamp(24px, 7vw, 32px);
  }

  .model-hero__stats {
    gap: var(--space-sm);
  }

  .hero-stat + .hero-stat {
    padding-left: var(--space-sm);
    border-left: none;           /* remove divider — flex-wrap makes it wrong on 2nd row */
  }

  .hero-stat__value {
    font-size: 22px;
  }

  /* Highlights */
  .highlights-grid {
    grid-template-columns: 1fr;
  }

  /* Trims */
  .trims-nav {
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;       /* Firefox */
    padding-bottom: 4px;         /* room for scroll thumb if it shows */
  }

  .trims-nav::-webkit-scrollbar {
    display: none;               /* Chrome/Safari */
  }

  .trims-nav__btn {
    padding: 8px 14px;
    font-size: 14px;
    flex-shrink: 0;              /* prevent buttons from squishing */
  }

  .trim-specs {
    grid-template-columns: 1fr 1fr;
  }

  /* Safety */
  .safety-list {
    grid-template-columns: 1fr;
  }

  /* Colors */
  .colors-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--space-sm);
  }

  .color-swatch__chip {
    width: 52px;
    height: 52px;
  }

  /* Comparison table — horizontal scroll on mobile */
  .comparison-wrap {
    border-radius: 0;
  }

  /* CTA */
  .model-cta h2 {
    font-size: 28px;
  }

  .model-cta .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .model-cta .btn {
    width: 100%;
  }

  /* Buttons general */
  .btn-group.btn-group--hero {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ============================================================
   SECTION 19: HERO FORM
   Two-column layout inside the hero: copy left, form right.
   On mobile the form stacks below the headline content.
   All colors reference CSS custom properties so the Subaru
   (or any future brand) port only needs variable overrides.
   ============================================================ */

/* Wrapper that creates the left/right split inside .model-hero__content */
.model-hero__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
  width: 100%;
}

@media (min-width: 1024px) {
  .model-hero__split {
    grid-template-columns: 56% 1fr;
    gap: 5%;
  }
}

/* Right-side lead capture form */
.model-hero__form {
  background: rgba(17, 17, 17, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 28px 24px 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.model-hero__form-title {
  color: #fff;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 20px;
  text-align: center;
  text-transform: uppercase;
}

.model-hero__form-title span {
  display: block;
  width: 32px;
  height: 2px;
  background: var(--color-primary);
  margin: 6px auto 0;
}

.hero-form__field {
  margin-bottom: 14px;
}

.hero-form__field label {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.hero-form__field input,
.hero-form__field select {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  box-sizing: border-box;
  color: #fff;
  font-family: var(--font-family);
  font-size: 16px;
  padding: 10px 12px;
  transition: border-color 0.2s ease;
}

.hero-form__field input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.hero-form__field input:focus,
.hero-form__field select:focus {
  border-color: var(--color-primary);
  outline: none;
}

.hero-form__field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding-right: 32px;
}

.hero-form__field select option {
  background: #1a1a1a;
  color: #fff;
}

.hero-form__submit {
  background: var(--color-primary);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: block;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-top: 6px;
  padding: 13px 16px;
  text-transform: uppercase;
  transition: background 0.2s ease, transform 0.15s ease;
  width: 100%;
}

.hero-form__submit:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.hero-form__privacy {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  line-height: 1.5;
  margin-top: 10px;
  text-align: center;
}


/* ============================================================
   SECTION 20: MODEL MEDIA (video / image)
   Placed between the hero and the What's New section.
   Supports a <video> embed or a fallback <img>.
   Comments in the HTML explain how to swap between them.
   ============================================================ */

.model-media {
  background: var(--color-dark);
  overflow: hidden;
  position: relative;
}

.model-media__video,
.model-media__image {
  display: block;
  height: auto;
  max-height: 560px;
  object-fit: cover;
  width: 100%;
}

.model-media__caption {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  bottom: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  left: 0;
  letter-spacing: 0.02em;
  padding: 20px 24px 12px;
  position: absolute;
  right: 0;
  text-align: center;
}

@media (max-width: 767px) {
  .model-media__video,
  .model-media__image {
    max-height: 280px;
  }
}


/* ============================================================
   SECTION 21: CONTACT FORM SECTION
   Full-width lead capture section placed before disclaimers.
   Two-column on desktop: dealer info left, form fields right.
   Uses CSS custom properties for full brand portability.
   ============================================================ */

.contact-section {
  background: #f7f7f7;
  padding: var(--space-xl) 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr 1.7fr;
    gap: 64px;
  }
}

/* Left column: dealer info */
.contact-info__heading {
  color: var(--color-dark);
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
}

.contact-info__subheading {
  color: var(--color-primary);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
  text-transform: uppercase;
}

.contact-info p {
  color: #555;
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 12px;
}

.contact-info a {
  color: var(--color-primary);
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

.contact-info__divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 20px 0;
}

.contact-info__detail {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.contact-info__detail svg {
  color: var(--color-primary);
  fill: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-info__detail span {
  color: #444;
  font-size: 16px;
  line-height: 1.55;
}

/* Right column: form fields */
.contact-form__row {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-bottom: 0;
}

@media (min-width: 480px) {
  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.contact-form__row .contact-form__field {
  margin-bottom: 0;
}

.contact-form__field label {
  color: #444;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--color-dark);
  font-family: var(--font-family);
  font-size: 16px;
  padding: 11px 13px;
  transition: border-color 0.2s ease;
  width: 100%;
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  border-color: var(--color-primary);
  outline: none;
}

.contact-form__field textarea {
  min-height: 108px;
  resize: vertical;
}

.contact-form__field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  cursor: pointer;
  padding-right: 34px;
}

.contact-form__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 4px;
}

.contact-form__submit {
  background: var(--color-primary);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 13px 36px;
  text-transform: uppercase;
  transition: background 0.2s ease, transform 0.15s ease;
}

.contact-form__submit:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.contact-form__disclaimer {
  color: #999;
  font-size: 12px;
  line-height: 1.55;
  margin-top: 12px;
}


/* ============================================================
   UTILITIES
   ============================================================ */

/* Centered content image wrapper used in trim, safety, and features sections */
.content-img-wrap {
  max-width: 860px;
  margin: 0 auto var(--space-lg);
  border-radius: var(--radius-md);
  overflow: hidden;
}