{#
/**
 * @file
 * Theme override for FAQ node.
 */
#}
<article{{ attributes.addClass('node', 'node--faq') }}>
  <div class="max-w-4xl 3xl:max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    {# Edit Button #}
    {% if can_edit %}
      <div class="mb-6 flex justify-end">
        <a href="{{ path('entity.node.edit_form', {'node': node.id}) }}" class="inline-flex items-center px-4 py-2 bg-gray-100 dark:bg-slate-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-slate-700 rounded-lg transition-colors text-sm font-medium">
          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
          </svg>
          {{ 'Edit'|t }}
        </a>
      </div>
    {% endif %}

    {# Question (Title) #}
    <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-8">
      {{ label }}
    </h1>

    {# Answer (Body) #}
    {% if content.field_faq_answer %}
      <div class="prose prose-lg dark:prose-invert max-w-none">
        {{ content.field_faq_answer }}
      </div>
    {% endif %}
  </div>
</article>
