<!--
  Utility Page Base Layout
  For email subscription management pages — visited from email links,
  needs brand context but not the auth-card treatment.
-->
<!doctype html>
<html lang="{{ html_lang }}" {{ html_lang_dir }}>
  <head>
    <meta charset="utf-8">
    <title>{% block title %}{{ pageTitle|default("") }}{% endblock %} | {{ site_settings.company_name }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, nofollow">
    {% if theme.dark_mode.enabled %}
    <meta name="color-scheme" content="light dark">
    {% else %}
    <meta name="color-scheme" content="light">
    {% endif %}

    {# Theme CSS variables — baked from HubSpot theme settings #}
    <style>
      :root {
        --color-primary: {{ theme.core.colors.primary.color }};
        --color-primary-contrast: {{ theme.core.colors.primary_contrast.color }};
        --color-secondary: {{ theme.core.colors.secondary.color }};
        --font-body: {{ theme.core.typography.body_font.font }}, {{ theme.core.typography.body_font.fallback }};
        --font-heading: {{ theme.core.typography.heading_font.font }}, {{ theme.core.typography.heading_font.fallback }};
        --font-size-base: {{ theme.core.typography.base_size }}px;
      }

      *, *::before, *::after { box-sizing: border-box; }
      * { margin: 0; padding: 0; }

      body {
        font-family: var(--font-body, system-ui, sans-serif);
        background: var(--color-bg, #f9fafb);
        color: var(--color-text, #111827);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        min-height: 100vh;
      }

      .utility-page {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }

      .utility-header {
        background: var(--color-bg, #ffffff);
        border-bottom: 1px solid var(--color-border, #e5e7eb);
        padding: 1.25rem 2rem;
      }

      .utility-header-inner {
        max-width: 720px;
        margin: 0 auto;
      }

      .utility-logo {
        max-height: 36px;
        max-width: 160px;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
      }

      .utility-brand-name {
        font-size: 1rem;
        font-weight: 700;
        color: var(--color-text, #111827);
        text-decoration: none;
      }

      .utility-content {
        flex: 1;
        max-width: 720px;
        width: 100%;
        margin: 0 auto;
        padding: 3rem 2rem;
      }

      .utility-footer {
        padding: 1.5rem 2rem;
        text-align: center;
        font-size: 0.8125rem;
        color: var(--color-text-muted, #9ca3af);
        border-top: 1px solid var(--color-border, #e5e7eb);
      }

      @media (max-width: 640px) {
        .utility-header { padding: 1rem; }
        .utility-content { padding: 2rem 1rem; }
      }

      {% if theme.dark_mode.enabled %}
      @media (prefers-color-scheme: dark) {
        body { background: var(--color-bg, #111827); color: var(--color-text, #f3f4f6); }
        .utility-header { background: var(--color-bg, #111827); }
      }
      {% endif %}
    </style>

    <link rel="stylesheet" href="{{ get_asset_url("../../css/modern.css") }}">
    {% if theme.dark_mode.enabled %}
    <link rel="stylesheet" href="{{ get_asset_url("../../css/dark.css") }}">
    {% endif %}

    {{ standard_header_includes }}
  </head>

  <body>
    <div class="utility-page">
      <header class="utility-header">
        <div class="utility-header-inner">
          {% if brand_settings.primaryLogo.src %}
            <img src="{{ brand_settings.primaryLogo.src }}"
                 alt="{{ brand_settings.primaryLogo.alt or site_settings.company_name }}"
                 class="utility-logo">
          {% elif site_settings.company_name %}
            <span class="utility-brand-name">{{ site_settings.company_name }}</span>
          {% endif %}
        </div>
      </header>

      <div class="utility-content">
        {% block body %}{% endblock %}
      </div>

      <footer class="utility-footer">
        &copy; {{ site_settings.company_name }}
      </footer>
    </div>

    {{ standard_footer_includes }}
  </body>
</html>
