<!DOCTYPE html>
<html{{ html_attributes | default(' dir="ltr" lang="en-US"') }}>

  <head>
    {% block head_meta_base -%}
      <meta charset="UTF-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="format-detection" content="telephone=no">
      <meta name="robots" content="index,follow">
    {% endblock head_meta_base %}

    {% block head_page_info -%}

      <!-- Document Title -->
      <title>
        {%- block document_title -%}

          {# WordPress #}
          {%- if HeadTitle -%}
            {{ HeadTitle }}

            {# Fractal #}
          {%- elseif page.title -%}
            {{ page.title ? page.title ~ " - " ~ site.title : site.title }}
          {%- else -%}
            {#- No title available. This is bad. -#}
            NO TITLE
          {%- endif -%}
        {%- endblock -%}
      </title>

      {# Page description #}
      {% block meta_description %}
        {% if page.description %}
          <meta name="description" content="{{ page.description }}">
        {% endif %}
      {% endblock meta_description %}

    {%- endblock head_page_info %}

    {%- block head_meta_facebook %}{% endblock %}

    {% block head_meta_twitter %}{% endblock %}

    {% block head_meta_icons -%}
      <!-- Favicon -->
      <link href="{{ baseURL ?: Site.ParentThemeURL }}/images/favicons/favicon.ico" rel="icon"/>

      <!-- Apple Touch Icons -->
      <link href="{{ baseURL ?: Site.ParentThemeURL }}/images/favicons/apple-touch-icon.png" rel="apple-touch-icon-precomposed"/>
      <meta content="" name="apple-mobile-web-app-title"/>
      <link rel="mask-icon" href="{{ baseURL ?: Site.ParentThemeURL }}/images/favicons/mu-safari-icon.svg" color="black">

      <!-- Microsoft Windows 8+ Tiles -->
      <meta content="" name="application-name"/>
      <meta content="{{ baseURL ?: Site.ParentThemeURL }}/images/favicons/apple-touch-icon.png" name="msapplication-TileImage"/>
      <meta content="#F1B82D" name="msapplication-TileColor"/>
    {% endblock head_meta_icons %}

    {% block head_js -%}
      <!-- JavaScript -->
      <script src="https://jonneal.dev/svg4everybody/svg4everybody.min.js"></script>
      <script>
        svg4everybody();
      </script>
      {# SVG.js library for decorations #}
      <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js"></script> {#- Putting this here for now, JLR #}
    {% endblock head_js %}

    {% block head_css -%}
      <!-- MIZ CSS -->
      <link rel="stylesheet" href="{{ Site.ParentThemeURL | default('/') }}css/miz-fonts.css{{ cacheBuster ? ' ?' ~ cachebuster }}"/>
      <link rel="stylesheet" href="{{ Site.ParentThemeURL | default('/') }}css/miz.css{{ cacheBuster ? ' ?' ~ cachebuster }}"/>
      <link rel="stylesheet" href="{{ Site.ParentThemeURL | default('/') }}css/miz-brand.css{{ cacheBuster ? ' ?' ~ cachebuster }}"/>
    {% endblock head_css -%}

    {# Reserved for CMS or site head code declarations #}
    {%- block head_code -%}{% endblock %}

  </head>

  <body{{ body.class ? (' class="' ~ body.class ~ '"')|raw }}>