<!DOCTYPE html>
<html lang="{{ lang }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>{{ app_name }}</title>
</head>
<body style="margin:0;padding:0;background-color:#F1F5F9;font-family:Helvetica,Arial,sans-serif;">

  {%- if preheader %}
  {# Hidden preheader trick: visible text + invisible padding to prevent
     email clients from pulling body text into the preview. #}
  <span style="display:none;font-size:1px;color:#F1F5F9;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">{{ preheader }}{% for _ in range(30) %}&#847; &zwnj; {% endfor %}</span>
  {%- endif %}

  <table width="100%" cellpadding="0" cellspacing="0" style="background-color:#F1F5F9;padding:40px 16px;">
    <tr><td align="center">
      <table width="520" cellpadding="0" cellspacing="0" style="max-width:520px;width:100%;background-color:#FFFFFF;border-radius:10px;border:1px solid #E2E8F0;overflow:hidden;">

        <!-- Blue accent border -->
        <tr><td style="height:3px;background-color:#1D4ED8;font-size:0;line-height:0;">&nbsp;</td></tr>

        <!-- Wordmark header -->
        <tr><td style="background-color:#0F172A;padding:24px 36px;">
          <a href="{{ base_url }}" style="text-decoration:none;">
            <span style="color:#FFFFFF;font-size:18px;font-weight:800;letter-spacing:-0.02em;font-family:'Bricolage Grotesque',Georgia,'Times New Roman',serif;">padelnomics</span>
          </a>
        </td></tr>

        <!-- Body -->
        <tr><td style="padding:36px;color:#334155;font-size:15px;line-height:1.65;">
          {% block body %}{% endblock %}
        </td></tr>

        <!-- Divider -->
        <tr><td style="height:1px;background-color:#E2E8F0;"></td></tr>

        <!-- Footer -->
        <tr><td style="padding:20px 36px;background-color:#F8FAFC;">
          <p style="margin:0 0 6px;font-size:12px;color:#94A3B8;text-align:center;">
            <a href="{{ base_url }}" style="color:#64748B;text-decoration:none;font-weight:500;">padelnomics.io</a>
            &nbsp;&middot;&nbsp;
            {{ tagline }}
          </p>
          <p style="margin:0;font-size:11px;color:#CBD5E1;text-align:center;">
            {{ copyright_text }}
          </p>
        </td></tr>

      </table>
    </td></tr>
  </table>
</body>
</html>
