{% extends 'website/base.html' %}
{% load static %}

{% block title %}{{ legal_page.meta_title|default:legal_page.title }} | {{ site_settings.site_name }}{% endblock %}

{% block extra_head %}
{% if legal_page.meta_description %}<meta name="description" content="{{ legal_page.meta_description }}">{% endif %}
{% endblock %}

{% block content %}
<div class="legal-page-header" data-aos="fade-up">
    <div class="container">
        <h1>{{ legal_page.title }}</h1>
        <p class="legal-page-updated">Last updated {{ legal_page.updated_at|date:"j F Y" }}</p>
    </div>
</div>

<section class="legal-page-body">
    <div class="container">
        <div class="legal-page-content" data-aos="fade-up">
            {{ legal_page.content|linebreaks }}
        </div>
    </div>
</section>

<style>
    .legal-page-header{
        padding:56px 0 28px;
        background:linear-gradient(135deg,#eef5ea 0%,#d9e8d4 100%);
        text-align:center;
    }
    .legal-page-header h1{
        margin:0 0 8px;
        font-size:2.1rem;
    }
    .legal-page-updated{
        margin:0;
        color:#666;
        font-size:0.9rem;
    }
    .legal-page-body{
        padding:48px 0 64px;
    }
    .legal-page-content{
        max-width:760px;
        margin:0 auto;
        line-height:1.75;
        color:#333;
    }
    .legal-page-content p{
        margin:0 0 1.1em;
    }
    .legal-page-content h2,
    .legal-page-content h3{
        margin:1.6em 0 0.6em;
    }
</style>
{% endblock %}