/*=============== FAQ TABLES FOR FEATURED SNIPPETS ===============*/

.faq__table {
  width: 100%;
  margin: var(--spacing-lg) 0;
  border-collapse: collapse;
  background: var(--body-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.faq__table thead {
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: var(--body-color);
}

.faq__table th {
  padding: var(--spacing-md);
  text-align: left;
  font-weight: var(--font-semibold);
  font-size: var(--small-font-size);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.faq__table td {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
}

.faq__table tbody tr:last-child td {
  border-bottom: none;
}

.faq__table tbody tr:hover {
  background: var(--bg-light);
}

.faq__table strong {
  color: var(--title-color);
  font-weight: var(--font-semibold);
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
  .faq__table {
    font-size: var(--smaller-font-size);
  }
  
  .faq__table th,
  .faq__table td {
    padding: var(--spacing-sm);
  }
  
  /* Stack table on very small screens */
  @media screen and (max-width: 480px) {
    .faq__table thead {
      display: none;
    }
    
    .faq__table, 
    .faq__table tbody, 
    .faq__table tr, 
    .faq__table td {
      display: block;
      width: 100%;
    }
    
    .faq__table tr {
      margin-bottom: var(--spacing-md);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
    }
    
    .faq__table td {
      text-align: right;
      padding-left: 50%;
      position: relative;
    }
    
    .faq__table td:before {
      content: attr(data-label);
      position: absolute;
      left: var(--spacing-sm);
      width: 45%;
      padding-right: var(--spacing-sm);
      font-weight: var(--font-semibold);
      text-align: left;
      color: var(--title-color);
    }
  }
}