/* ============================================================
   Landing page extras - FAQ accordion + comparison table
   Used only on SEO landing pages. Pulls colors/fonts from
   global-style.css CSS variables (Motel 6 brand blue).
   ============================================================ */

/* Landing-page hero override.
   Global .hero uses clamp(2.5rem, 6vw, 5rem) for the H1, which is sized
   for short headlines like "Reserve Your Room". SEO landing pages have
   long keyword H1s ("Hotels Near Great Smoky Mountains National Park")
   that wrap 2-3 lines at that size and overflow the hero box, getting
   clipped by the fixed header.
   We only override the H1 typography and slightly raise the min-height
   - we deliberately leave .hero-overlay positioning alone so the blue
   tint continues to fill the full hero (the overlay must stay
   position:absolute;inset:0 from global-style.css). */
.hero.hero-landing {
  min-height: clamp(380px, 52vh, 540px);
}
.hero.hero-landing .hero-overlay h1 {
  font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  line-height: 1.18;
  margin-bottom: var(--spacing-sm);
}
.hero.hero-landing .hero-subtitle {
  font-size: clamp(0.95rem, 1.7vw, 1.15rem);
  margin-bottom: var(--spacing-md);
  line-height: 1.55;
}
@media (max-width: 768px) {
  .hero.hero-landing {
    min-height: clamp(420px, 65vh, 600px);
  }
  .hero.hero-landing .hero-overlay h1 {
    font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  }
}

/* FAQ accordion (uses native <details>) */
.faq-list {
  max-width: 900px;
  margin: var(--spacing-md) auto 0;
}
.faq-list details {
  background: var(--white);
  border: 1px solid var(--light-gray);
  margin-bottom: var(--spacing-sm);
  transition: box-shadow var(--transition-fast);
}
.faq-list details[open] {
  box-shadow: var(--shadow-md);
  border-color: var(--motel6-blue);
}
.faq-list summary {
  padding: var(--spacing-md) var(--spacing-lg);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--charcoal);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 3rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+';
  position: absolute;
  right: var(--spacing-lg);
  top: 50%;
  transform: translateY(-50%);
  color: var(--motel6-blue);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
}
.faq-list details[open] summary::after { content: '\2212'; }
.faq-list .faq-answer {
  padding: 0 var(--spacing-lg) var(--spacing-md);
  color: var(--dark-gray);
  font-size: 1rem;
  line-height: 1.75;
}
.faq-list .faq-answer p:last-child { margin-bottom: 0; }

/* Comparison table */
.compare-table-wrap {
  max-width: 900px;
  margin: var(--spacing-md) auto 0;
  overflow-x: auto;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--light-gray);
}
.compare-table th,
.compare-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--light-gray);
  font-size: 1rem;
}
.compare-table th {
  background: var(--motel6-blue);
  color: var(--white);
  font-family: var(--font-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.875rem;
}
.compare-table tbody tr:nth-child(even) { background: var(--off-white); }
.compare-table tr.highlight {
  background: var(--warm-beige) !important;
  font-weight: 700;
}
.compare-table tr.highlight td:first-child { color: var(--motel6-blue); }
@media (max-width: 600px) {
  .compare-table th,
  .compare-table td {
    padding: 12px 10px;
    font-size: 0.92rem;
  }
}

/* Distance / proximity list */
.distance-list {
  max-width: 900px;
  margin: var(--spacing-md) auto 0;
  padding: 0;
  list-style: none;
}
.distance-list li {
  background: var(--white);
  border-left: 4px solid var(--motel6-blue);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  box-shadow: var(--shadow-xs);
}
.distance-list .place { font-weight: 600; color: var(--charcoal); }
.distance-list .distance {
  font-weight: 700;
  color: var(--motel6-blue);
  font-size: 0.95rem;
}

/* Related links footer */
.related-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
  max-width: 1100px;
  margin: var(--spacing-md) auto 0;
}
.related-links a {
  background: var(--white);
  padding: var(--spacing-md);
  border: 1px solid var(--light-gray);
  text-align: center;
  font-weight: 700;
  color: var(--motel6-blue);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.related-links a:hover {
  background: var(--motel6-blue);
  color: var(--white);
  border-color: var(--motel6-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}