<!--
  templateType: none
  description: Base template for landing pages - Minimal header, no footer, optimized for conversions
-->
<!DOCTYPE html>
<html lang="{{ html_lang }}" {{ html_lang_dir }}>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% if theme.dark_mode.enabled %}
    <meta name="color-scheme" content="light dark">
    {% else %}
    <meta name="color-scheme" content="light">
    {% endif %}

    {# Performance hints #}
    <link rel="preconnect" href="https://cdn2.hubspot.net" crossorigin>
    <link rel="dns-prefetch" href="https://cdn2.hubspot.net">
    <link rel="preconnect" href="https://js.hsforms.net" crossorigin>
    <link rel="dns-prefetch" href="https://js.hsforms.net">
    
    <title>{{ page_meta.html_title or pageTitle }}</title>
    <meta name="description" content="{{ page_meta.meta_description }}">
    
    {# Favicon #}
    {% if brand_settings.favicon.src %}
      <link rel="icon" href="{{ brand_settings.favicon.src }}">
      <link rel="apple-touch-icon" href="{{ brand_settings.favicon.src }}">
    {% endif %}
    
    {# Open Graph for social sharing #}
    <meta property="og:title" content="{{ page_meta.html_title or pageTitle }}">
    <meta property="og:description" content="{{ page_meta.meta_description }}">
    <meta property="og:url" content="{{ content.absolute_url or request.full_url }}">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="{{ site_settings.company_name }}">
    <meta property="og:locale" content="{{ html_lang|replace('-', '_') }}">
    {% if content.featured_image %}
      <meta property="og:image" content="{{ content.featured_image }}">
    {% elif brand_settings.primaryLogo.src %}
      <meta property="og:image" content="{{ brand_settings.primaryLogo.src }}">
    {% endif %}
    <meta name="twitter:card" content="summary_large_image">
    
    {# Landing page optimized CSS #}
    <style>
      :root {
        --color-primary: {{ theme.core.colors.primary.color or '#007bff' }};
        --color-secondary: {{ theme.core.colors.secondary.color or '#6c757d' }};
        --color-text: #111827;
        --color-bg: #ffffff;
        --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        --container-width: min(90%, {{ theme.core.layout.container_width or 1200 }}px);
        --spacing: clamp(1rem, 2vw, 2rem);
      }

      {% if theme.dark_mode.enabled %}
      /* Dark mode support - follows system preference. Values match the
         palette in css/dark.css so there's no shift when async CSS lands. */
      @media (prefers-color-scheme: dark) {
        :root {
          --color-text: #f3f4f6;
          --color-bg: #111827;
        }
      }
      {% endif %}

      /* Base reset */
      *, *::before, *::after { box-sizing: border-box; }
      * { margin: 0; padding: 0; }
      
      html {
        font-size: 100%;
        scroll-behavior: smooth;
        text-size-adjust: 100%;
      }
      
      body {
        font-family: var(--font-sans);
        font-size: 1rem;
        line-height: 1.6;
        color: var(--color-text);
        background: var(--color-bg);
        min-height: 100vh;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      
      /* Form column card — targets the dnd_column that contains a HubSpot form
         via :has() (css_class isn't supported on dnd_column). Both selectors
         because HubSpot embeds render either a direct form.hs-form or an
         .hs-form-frame wrapper depending on embed mode. */
      #main .dnd-column:has(form.hs-form),
      #main .dnd-column:has(.hs-form-frame) {
        background: var(--color-bg-secondary, #f9fafb);
        border: 1px solid var(--color-border, #e5e7eb);
        border-radius: 12px;
        padding: 2rem;
      }

      /* Logo dark/light variants — mirrors header.module behaviour */
      .landing-logo-dark { display: none; }
      @media (prefers-color-scheme: dark) {
        .landing-logo-light { display: none; }
        .landing-logo-dark  { display: block; }
      }
      /* Minimal header styles for landing pages */
      .landing-header {
        padding: 1rem 0;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
      }
      
      .landing-header__container {
        width: var(--container-width);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      .landing-header__logo img {
        max-height: 50px;
        width: auto;
      }
      
      .landing-header__cta {
        display: flex;
        gap: 1rem;
        align-items: center;
      }
      
      /* Main content area */
      .landing-main {
        min-height: calc(100vh - 80px);
      }
      
      /* Basic utilities */
      .container {
        width: var(--container-width);
        margin: 0 auto;
        padding: var(--spacing);
      }
      
      img, video {
        display: block;
        max-width: 100%;
        height: auto;
      }
      
      /* Accessibility */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      
      /* Skip link */
      .skip-link {
        position: absolute;
        top: -40px;
        left: 0;
        background: var(--color-primary);
        color: white;
        padding: 8px;
        text-decoration: none;
        z-index: 100;
      }
      
      .skip-link:focus {
        top: 0;
      }

      /* DnD section width cap — mirrors layouts/base.html. Without this,
         landing-page sections rendered full viewport width (this layout
         previously defined no .dnd-section cap and modern.css carries none).
         Width only — section padding/rhythm is intentionally left untouched. */
      .dnd-section > .row-fluid {
        max-width: {{ theme.core.layout.container_width or 1200 }}px;
        margin: 0 auto;
        padding: 0 5px;
      }
      .dnd-section.dnd-section--full-width > .row-fluid,
      .dnd-section.dnd-section--flush > .row-fluid {
        max-width: none;
        padding: 0;
      }
    </style>
    
    {# Load theme CSS asynchronously. accordion.css + forms.css are server-side
       {% include %}d into modern.css, so this single file covers them. #}
    <link rel="preload" href="{{ get_asset_url('../../css/modern.css') }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
      <link rel="stylesheet" href="{{ get_asset_url('../../css/modern.css') }}">
    </noscript>

    {# Auto dark mode — media-gated so light-mode users never render-block on it. #}
    {% if theme.dark_mode.enabled %}
    <link rel="stylesheet" href="{{ get_asset_url('../../css/dark.css') }}" media="(prefers-color-scheme: dark)">
    {% endif %}

    {% if template_css %}
      <link rel="preload" href="{{ get_asset_url(template_css) }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
      <noscript><link rel="stylesheet" href="{{ get_asset_url(template_css) }}"></noscript>
    {% endif %}
    
    {{ standard_header_includes }}
  </head>
  
  <body class="landing-page-body">
    {# Skip to main content for accessibility #}
    <a href="#main" class="skip-link">Skip to main content</a>
    
    {# Minimal header for landing pages - logo and optional CTA #}
    {% block header %}
      <header class="landing-header" role="banner">
        <div class="landing-header__container">
          <div class="landing-header__logo">
            {% if brand_settings.primaryLogo.src %}
              <a href="{{ request.scheme }}://{{ request.domain }}/" aria-label="{{ site_settings.company_name or 'Home' }}">
                {# Primary (light) logo #}
                <img class="landing-logo-light"
                     src="{{ brand_settings.primaryLogo.src }}"
                     alt="{{ brand_settings.primaryLogo.alt or site_settings.company_name or 'Logo' }}"
                     loading="eager"
                     fetchpriority="high"
                     decoding="async"
                     style="height: 50px; width: auto;">
                {# Dark variant — falls back to primary if not set #}
                {% set dark_logo_src = brand_settings.logo.src or brand_settings.primaryLogo.src %}
                <img class="landing-logo-dark"
                     src="{{ dark_logo_src }}"
                     alt="{{ brand_settings.primaryLogo.alt or site_settings.company_name or 'Logo' }}"
                     loading="eager"
                     fetchpriority="high"
                     decoding="async"
                     style="height: 50px; width: auto;">
              </a>
            {% else %}
              <a href="{{ request.scheme }}://{{ request.domain }}/" class="landing-header__text-logo">
                {{ site_settings.company_name or 'Company' }}
              </a>
            {% endif %}
          </div>
          
          {# Optional CTA area for landing pages #}
          {% block header_cta %}
            <div class="landing-header__cta">
              {# Templates can add phone number, button, etc. here #}
            </div>
          {% endblock header_cta %}
        </div>
      </header>
    {% endblock header %}
    
    {# Main content #}
    <main id="main" class="landing-main" role="main">
      {% block body %}
        {# Landing page content goes here #}
      {% endblock body %}
    </main>
    
    {# No footer for landing pages - maximizes focus on conversion #}
    {% block footer %}
      {# Intentionally empty - landing pages typically don't have footers #}
    {% endblock footer %}
    
    {{ standard_footer_includes }}
    
    {# Minimal JavaScript for landing pages #}
    <script>
      // Basic form tracking if needed
      document.addEventListener('DOMContentLoaded', function() {
        // Track form submissions
        const forms = document.querySelectorAll('form');
        forms.forEach(form => {
          form.addEventListener('submit', function() {
            if (window._hsq) {
              window._hsq.push(['trackEvent', {
                id: 'Landing Page Form Submit',
                value: window.location.pathname
              }]);
            }
          });
        });
      });
    </script>
    
    {# Feature detection and enhancement scripts #}
    {% include "../../includes/features/feature-loader.html" %}
  </body>
</html>