/* ═══════════════════════════════════════════════════════════════════
   AMENITY BLOG POST COMPONENTS — Session 11E Enhancement
   Matches HSLG "Warm Editorial Guide" design system
   ═══════════════════════════════════════════════════════════════════ */

/* ── Article Body Prose Typography ── */
.article-body p {
  margin: 0 0 1.25em;
  font-family: 'Source Sans 3', sans-serif;
}

.article-body h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.35rem;
  color: var(--headline, #002846);
  margin: 2em 0 0.75em;
  line-height: 1.3;
}

.article-body h3 {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.1rem;
  color: var(--headline, #002846);
  margin: 1.5em 0 0.5em;
  line-height: 1.35;
}

.article-body ul,
.article-body ol {
  margin: 0 0 1.25em 1.5em;
  padding: 0;
}

.article-body ul {
  list-style: disc;
}

.article-body ol {
  list-style: decimal;
}

.article-body li {
  margin-bottom: 0.5em;
  padding-left: 0.25em;
}

.article-body li strong {
  color: var(--headline, #002846);
}

.article-body a {
  color: var(--teal, #2A7B88);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-body a:hover {
  color: var(--teal-mid, #1E6875);
}

/* ── Key Takeaways Box ── */
.amenity-key-takeaways {
  background: var(--teal-soft, #EBF5F7);
  border: 1px solid rgba(42, 123, 136, 0.2);
  border-left: 4px solid var(--teal, #2A7B88);
  border-radius: 12px;
  padding: 0;
  margin: 32px 0;
  overflow: hidden;
}

.amenity-key-takeaways__header {
  background: var(--teal, #2A7B88);
  color: #fff;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 20px;
}

.amenity-key-takeaways ul {
  list-style: none;
  padding: 20px 24px;
  margin: 0;
}

.amenity-key-takeaways li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--body, #4A5568);
}

.amenity-key-takeaways li:last-child {
  margin-bottom: 0;
}

.amenity-key-takeaways li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal, #2A7B88);
  font-weight: 700;
  font-size: 1.1rem;
}

.amenity-key-takeaways li strong {
  color: var(--headline, #002846);
}

/* ── Facility Quick Facts Card ── */
.amenity-quick-facts {
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border-col, #E5E7EB);
  border-radius: 12px;
  padding: 0;
  margin: 32px 0;
  overflow: hidden;
  box-shadow: var(--card-shadow, 0 2px 16px rgba(0,40,70,0.07));
}

.amenity-quick-facts__header {
  background: var(--navy, #002846);
  color: #fff;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 20px;
}

.amenity-quick-facts table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Source Sans 3', sans-serif;
}

.amenity-quick-facts td {
  padding: 10px 20px;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border-col, #E5E7EB);
  color: var(--body, #4A5568);
}

.amenity-quick-facts tr:last-child td {
  border-bottom: none;
}

.amenity-quick-facts td:first-child {
  font-weight: 600;
  color: var(--headline, #002846);
  width: 35%;
  white-space: nowrap;
}

.amenity-quick-facts a {
  color: var(--teal, #2A7B88);
  text-decoration: none;
  font-weight: 500;
}

.amenity-quick-facts a:hover {
  text-decoration: underline;
}

/* ── Amenity Summary Table ── */
.amenity-summary-table {
  margin: 32px 0;
  overflow-x: auto;
}

.amenity-summary-table h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.25rem;
  color: var(--headline, #002846);
  margin-bottom: 16px;
}

.amenity-summary-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Source Sans 3', sans-serif;
  border: 1px solid var(--border-col, #E5E7EB);
  border-radius: 8px;
  overflow: hidden;
}

.amenity-summary-table thead {
  background: var(--teal-soft, #EBF5F7);
}

.amenity-summary-table th {
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--teal, #2A7B88);
  text-align: left;
  border-bottom: 2px solid var(--teal, #2A7B88);
}

.amenity-summary-table th:nth-child(2) {
  text-align: center;
  width: 80px;
}

.amenity-summary-table td {
  padding: 10px 16px;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border-col, #E5E7EB);
  color: var(--body, #4A5568);
}

.amenity-summary-table td:first-child {
  font-weight: 600;
  color: var(--headline, #002846);
}

.amenity-summary-table td:nth-child(2) {
  text-align: center;
  font-weight: 700;
  color: var(--teal, #2A7B88);
}

.amenity-summary-table tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--teal, #2A7B88);
  background: var(--teal-soft, #EBF5F7);
}

.amenity-summary-table tbody tr:hover {
  background: var(--surface-tint, #F7F2EC);
}

/* ── FAQ Accordion ── */
.amenity-faq {
  margin: 40px 0;
}

.amenity-faq h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.25rem;
  color: var(--headline, #002846);
  margin-bottom: 16px;
}

.amenity-faq details {
  border: 1px solid var(--border-col, #E5E7EB);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.amenity-faq details:hover {
  box-shadow: 0 2px 8px rgba(42, 123, 136, 0.1);
}

.amenity-faq details[open] {
  border-color: var(--teal, #2A7B88);
}

.amenity-faq summary {
  padding: 14px 20px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--headline, #002846);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.amenity-faq summary::-webkit-details-marker {
  display: none;
}

.amenity-faq summary::after {
  content: "+";
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--teal, #2A7B88);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 12px;
}

.amenity-faq details[open] summary::after {
  content: "−";
}

.amenity-faq__answer {
  padding: 0 20px 16px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--body, #4A5568);
  border-top: 1px solid var(--border-col, #E5E7EB);
  padding-top: 14px;
}

/* ── CTA Section ── */
.amenity-cta {
  text-align: center;
  padding: 32px 24px;
  margin: 40px 0;
  background: var(--cream, #F9F3E9);
  border-radius: 14px;
  border: 1px solid var(--sand, #EDE4D3);
}

.amenity-cta h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.2rem;
  color: var(--headline, #002846);
  margin-bottom: 10px;
}

.amenity-cta p {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.95rem;
  color: var(--body, #4A5568);
  margin-bottom: 20px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.amenity-cta .btn--teal {
  display: inline-block;
  padding: 14px 28px;
  background: var(--teal, #2A7B88);
  color: #fff;
  border-radius: 10px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
}

.amenity-cta .btn--teal:hover {
  background: var(--teal-mid, #1E6875);
  box-shadow: 0 4px 12px rgba(42, 123, 136, 0.25);
}

/* ── Disclaimer ── */
.amenity-disclaimer {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.78rem;
  color: var(--body-light, #8896A4);
  font-style: italic;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border-col, #E5E7EB);
}

/* ── Related Facility Content (Session 11E) ── */
.amenity-related {
  margin-top: 48px;
  padding: 24px;
  background: var(--bg-alt, #EDE4D3);
  border: 1px solid var(--border-col, #E5E7EB);
  border-radius: 14px;
}

.amenity-related h3 {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.05rem;
  color: var(--headline, #002846);
  margin-bottom: 14px;
}

.amenity-related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.amenity-related a {
  color: var(--teal, #2A7B88);
  text-decoration: none;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
}

.amenity-related a:hover {
  text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .amenity-key-takeaways li {
    padding-left: 24px;
    font-size: 0.9rem;
  }

  .amenity-quick-facts td {
    padding: 8px 14px;
    font-size: 0.85rem;
  }

  .amenity-summary-table th,
  .amenity-summary-table td {
    padding: 8px 10px;
    font-size: 0.82rem;
  }

  .amenity-faq summary {
    padding: 12px 16px;
    font-size: 0.9rem;
  }

  .amenity-faq__answer {
    padding: 0 16px 14px;
    padding-top: 12px;
  }

  .amenity-cta {
    padding: 24px 16px;
  }
}

/* ── Dark mode support ── */
[data-theme="dark"] .amenity-key-takeaways {
  background: rgba(42, 123, 136, 0.1);
  border-color: rgba(42, 123, 136, 0.3);
}

[data-theme="dark"] .amenity-quick-facts {
  background: var(--surface);
  border-color: var(--border-col);
}

[data-theme="dark"] .amenity-summary-table thead {
  background: rgba(42, 123, 136, 0.15);
}

[data-theme="dark"] .amenity-summary-table tfoot td {
  background: rgba(42, 123, 136, 0.1);
}

[data-theme="dark"] .amenity-faq details {
  border-color: var(--border-col);
}

[data-theme="dark"] .amenity-faq details[open] {
  border-color: var(--teal);
}

[data-theme="dark"] .amenity-cta {
  background: var(--surface);
  border-color: var(--border-col);
}

[data-theme="dark"] .amenity-related {
  background: var(--surface);
}