<!--
  templateType: none
  description: Modern HTML5 base template - No legacy browser support
-->
<!DOCTYPE html>
<html lang="{{ html_lang }}" {{ html_lang_dir }}>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {# Tell the UA which schemes the page supports so form controls,
       scrollbars and the default canvas match the theme. #}
    {% if theme.dark_mode.enabled %}
    <meta name="color-scheme" content="light dark">
    {% else %}
    <meta name="color-scheme" content="light">
    {% endif %}

    {# Modern performance hints - optimized for HubSpot #}
    <link rel="preconnect" href="https://cdn2.hubspot.net" crossorigin>
    <link rel="dns-prefetch" href="https://cdn2.hubspot.net">
    <link rel="preconnect" href="https://js.hubspot.com" crossorigin>
    <link rel="dns-prefetch" href="https://js.hubspot.com">
    <link rel="preconnect" href="https://js.hs-analytics.net" crossorigin>
    <link rel="dns-prefetch" href="https://js.hs-analytics.net">
    
    <title>{% block title %}{{ page_meta.html_title or pageTitle }}{% endblock %}</title>
    <meta name="description" content="{% block description %}{{ page_meta.meta_description or content.post_summary|striptags|truncate(155) }}{% endblock %}">

    {# Modern favicon setup #}
    {% 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 and Twitter Cards for better sharing #}
    <meta property="og:title" content="{{ page_meta.html_title or pageTitle }}">
    <meta property="og:description" content="{{ page_meta.meta_description or content.post_summary|striptags|truncate(155) }}">
    <meta property="og:url" content="{{ content.absolute_url or request.full_url }}">
    <meta property="og:site_name" content="{{ site_settings.company_name }}">
    <meta property="og:locale" content="{{ html_lang|replace('-', '_') }}">
    {% if content.blog_post_author %}
      <meta property="og:type" content="article">
      <meta property="article:published_time" content="{{ content.publish_date|datetimeformat('%Y-%m-%dT%H:%M:%S%z') }}">
      <meta property="article:modified_time" content="{{ content.updated|datetimeformat('%Y-%m-%dT%H:%M:%S%z') }}">
      <meta property="article:author" content="{{ content.blog_post_author.display_name }}">
    {% else %}
      <meta property="og:type" content="website">
    {% endif %}
    {% 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">
    
    {# Theme Setting Variables - from fields.json #}
    <style>
      :root {
        /* Theme Colors - from Theme Settings */
        --color-primary: {{ theme.core.colors.primary.color }};
        --color-primary-contrast: {{ theme.core.colors.primary_contrast.color }};
        --color-secondary: {{ theme.core.colors.secondary.color }};
        --color-success: {{ theme.core.colors.success.color }};
        --color-danger: {{ theme.core.colors.danger.color }};

        /* Theme Typography - from Theme Settings */
        --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;

        /* Theme Layout - from Theme Settings */
        --container-width: min(90%, {{ theme.core.layout.container_width or 1200 }}px);
        --container-width-narrow: min(90%, 800px);

        /* Critical surface tokens — light defaults so the inline critical CSS
           below (body, .container) paints correctly before async modern.css
           arrives. Full token palette is defined in modern.css. */
        --color-bg: #ffffff;
        --color-text: #111827;
        --spacing: 1rem;
      }

      {% if theme.dark_mode.enabled %}
      /* Dark mode (first paint) — follows system preference when enabled.
         The complete token set + component dark rules load via css/dark.css. */
      @media (prefers-color-scheme: dark) {
        :root {
          --color-bg: #111827;
          --color-text: #f3f4f6;
          --color-primary-dark: color-mix(in srgb, {{ theme.core.colors.primary.color }} 70%, white);
        }
      }
      {% endif %}
      
      /* Modern reset - No normalize needed */
      *, *::before, *::after {
        box-sizing: border-box;
      }
      
      * {
        margin: 0;
        padding: 0;
      }
      
      html {
        font-size: 100%;
        scroll-behavior: smooth;
        text-size-adjust: 100%;
        /* Edge-positioned UI (header dropdowns, badges, off-canvas panels) must
           never widen the document and spawn a horizontal scrollbar that reflows
           the page. `clip` (not `hidden`) keeps <html> a non-scroll container. */
        overflow-x: clip;
      }
      
      body {
        font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
        font-size: var(--font-size-base);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        min-height: 100vh;
        text-rendering: optimizeLegibility;
        min-height: 100dvh;
        background-color: var(--color-bg);
        color: var(--color-text);
      }

      h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
      }
      
      img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
        height: auto;
      }
      
      /* Browsers derive aspect-ratio from the HTML width/height attributes
         natively; attr() is not supported in aspect-ratio, so no rule needed. */

      /* Reserve space for header to prevent CLS */
      .site-header {
        min-height: 60px;
      }
      
      input, button, textarea, select {
        font: inherit;
      }
      
      /* Modern container using CSS Grid */
      .container {
        width: var(--container-width);
        margin-inline: auto;
        padding-inline: var(--spacing);
      }
      
      /* Loading states */
      [data-loading] {
        opacity: 0.6;
        pointer-events: none;
      }
      
      /* Focus visible for accessibility */
      :focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
      }
      
      /* Reduced motion support */
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
      }
      
      /* Critical DnD Container Styles - Prevent Layout Shift */
      /* Inlined to prevent CLS when server response is slow */
      .row-fluid-wrapper {
        position: relative;
        min-height: 100px;
      }
      
      .row-fluid {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }

      .dnd-section {
        position: relative;
        padding: 2rem 0;
        contain: layout style;
        width: 100%;
      }

      .dnd-section > .row-fluid {
        max-width: {{ theme.core.layout.container_width or 1200 }}px;
        margin: 0 auto;
        padding: 0 5px;
      }

      /* Full-width sections - no container constraint */
      .dnd-section.dnd-section--full-width > .row-fluid {
        max-width: none;
        padding: 0;
      }

      /* Flush sections - zero padding on all sides (auto-applied to hero
         sections). The hero owns its own spacing; the wrapping section must not
         add the default 2rem (32px) vertical rhythm or any side gutter. */
      .dnd-section.dnd-section--flush {
        padding: 0;
      }
      .dnd-section.dnd-section--flush > .row-fluid {
        max-width: none;
        padding: 0;
      }
      .dnd-section.dnd-section--flush .dnd-column {
        padding: 0;
      }

      .dnd-column {
        position: relative;
        width: 100%;
        padding: 0 15px;
        min-height: 1px;
      }
      
      /* Reserve space for content areas */
      .dnd_area-row-0-background-layer { min-height: 400px; contain: layout; }
      .dnd_area-row-1-background-layer,
      .dnd_area-row-2-background-layer { min-height: 300px; contain: layout; }
      
      .row-depth-1 { position: relative; z-index: 1; }
      .row-number-1, .row-number-2, .row-number-3 { display: block; width: 100%; }
      
      /* Grid columns */
      /* .span0 is the dnd-area root cell (w=0); without a width it shrinks to
         content under flex, collapsing single-module sections on desktop */
      .span0 { width: 100%; }
      .span1 { width: 8.33%; }
      .span2 { width: 16.66%; }
      .span3 { width: 25%; }
      .span4 { width: 33.33%; }
      .span5 { width: 41.66%; }
      .span6 { width: 50%; }
      .span7 { width: 58.33%; }
      .span8 { width: 66.66%; }
      .span9 { width: 75%; }
      .span10 { width: 83.33%; }
      .span11 { width: 91.66%; }
      .span12 { width: 100%; }
      
      @media (max-width: 767px) {
        [class*="span"] { width: 100%; }
        .row-fluid { flex-direction: column; }
        .dnd_area-row-0-background-layer,
        .dnd_area-row-1-background-layer,
        .dnd_area-row-2-background-layer { min-height: 200px; }
      }
    </style>
    
    {# Warm the main JS bundle during HTML parse (it's loaded via dynamic import below) #}
    <link rel="modulepreload" href="{{ get_asset_url('../../js/modern.js') }}">

    {# Load CSS asynchronously (preload then swap to stylesheet).
       accordion.css + forms.css are server-side {% include %}d into modern.css,
       so this single file covers them — one request, one swap. #}
    <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 — only when the theme setting is enabled. Served as a
       media-gated stylesheet: light-mode users fetch it at lowest priority and
       it never render-blocks for them; dark-mode users get it render-blocking
       (tiny) so component dark rules paint with the first frame — no flash. #}
    {% if theme.dark_mode.enabled %}
    <link rel="stylesheet" href="{{ get_asset_url('../../css/dark.css') }}" media="(prefers-color-scheme: dark)">
    {% endif %}

    {# Template-specific styles #}
    {% 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 %}

    {# Templates can preload their LCP image / add page-level head tags here #}
    {% block head_extra %}{% endblock %}

    {# Structured data — Organization + WebSite so answer engines can attribute
       the site as an entity. Emitted on every page (harmless, valid). #}
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@graph": [
        {
          "@type": "Organization",
          "name": {{ site_settings.company_name|tojson }},
          "url": "{{ request.scheme }}://{{ request.domain }}"{% if brand_settings.primaryLogo.src %},
          "logo": {{ brand_settings.primaryLogo.src|tojson }}{% endif %}
        },
        {
          "@type": "WebSite",
          "name": {{ site_settings.company_name|tojson }},
          "url": "{{ request.scheme }}://{{ request.domain }}"
        }
      ]
    }
    </script>

    {{ standard_header_includes }}
  </head>
  
  <body>
    {# Browser compatibility check #}
    {% module "browser_check"
      path="../../modules/browser-check.module"
      label="Browser Check"
      content={"enabled": true}
    %}
    
    {# Modern semantic header #}
    {% block header %}
      {% module "site_header"
        path="../../modules/header.module"
        label="Site Header"
      %}
    {% endblock header %}
    
    {# Main content with semantic HTML5 #}
    <main id="main" class="site-main" role="main">
      {% block body %}
        <article class="content">
          <div class="container">
            {# Content goes here #}
          </div>
        </article>
      {% endblock body %}
    </main>
    
    {# Aside for sidebars (optional) #}
    {% block aside %}
    {% endblock aside %}
    
    {# Modern semantic footer #}
    {% block footer %}
      {% module "site_footer"
        path="../../modules/footer.module"
        label="Site Footer"
      %}
    {% endblock footer %}
    
    {# Modern JavaScript with ES6 modules #}
    <script type="module">
      // Modern JavaScript - ES6+ only
      const scriptUrl = '{{ get_asset_url("../../js/modern.js") }}';
      if (scriptUrl) {
        import(scriptUrl).then(module => {
          const initSite = module.initSite;
          // Initialize when DOM is ready
          if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initSite);
          } else {
            initSite();
          }
        });
      }
      
      // Modern lazy loading for images
      if ('loading' in HTMLImageElement.prototype) {
        const images = document.querySelectorAll('img[loading="lazy"]');
        images.forEach(img => {
          if (!img.complete) {
            img.classList.add('loading');
            img.addEventListener('load', () => img.classList.remove('loading'), { once: true });
          }
        });
      }
    </script>

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