<!DOCTYPE html>
<html lang="{{ config.default_language | default(value="en") }}">
<head>
    <title>{% block title %}{{ config.title }}{% endblock title %}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    {%- set hf = config.extra.heading_font | default(value="Inter") %}
    {%- set hw = config.extra.heading_weights | default(value="600;700;800") %}
    {%- set bf = config.extra.body_font | default(value="Inter") %}
    {%- set bw = config.extra.body_weights | default(value="400;500;600") %}
    {%- if hf == bf %}
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{ hf | replace(from=" ", to="+") }}:wght@{{ bw }};{{ hw }}&display=swap">
    {%- else %}
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{ hf | replace(from=" ", to="+") }}:wght@{{ hw }}&family={{ bf | replace(from=" ", to="+") }}:wght@{{ bw }}&display=swap">
    {%- endif %}
    <link rel="stylesheet" href="/style.css">
    <meta name="format-detection" content="telephone=no">

{%- block open_graph %}
    {%- if page %}
        {%- set og_title = page.title ~ " | " ~ config.title %}
        {%- set og_desc = page.description | default(value="") %}
        {%- set og_url = page.permalink %}
    {%- elif section %}
        {%- set og_title = section.title | default(value=config.title) %}
        {%- set og_desc = section.description | default(value="") %}
        {%- set og_url = section.permalink %}
    {%- else %}
        {%- set og_title = config.title %}
        {%- set og_desc = "" %}
        {%- set og_url = config.base_url %}
    {%- endif %}
    <meta name="description" content="{{ og_desc }}">
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{ og_title }}">
    <meta property="og:description" content="{{ og_desc }}">
    <meta property="og:url" content="{{ og_url }}">
    {%- if config.extra.og_image %}
    <meta property="og:image" content="{{ config.extra.og_image }}">
    {%- endif %}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="theme-color" content="{{ config.extra.theme_color | default(value="#2563EB") }}">
{%- endblock open_graph %}

    {%- if config.extra.favicon %}
    <link rel="icon" type="{{ config.extra.favicon_mimetype | default(value="image/png") }}" sizes="32x32" href="{{ config.extra.favicon }}">
    {%- endif %}

    <link rel="canonical" href="{{ og_url }}">

    {%- if config.extra.schema_type %}
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "{{ config.extra.schema_type }}",
      "name": "{{ config.title }}",
      "url": "{{ config.base_url }}",
      {%- if config.extra.contact_email %}
      "email": "{{ config.extra.contact_email }}",
      {%- endif %}
      {%- if config.extra.contact_phone %}
      "telephone": "{{ config.extra.contact_phone }}",
      {%- endif %}
      {%- if config.extra.location %}
      "address": {
        "@type": "PostalAddress",
        "addressLocality": "{{ config.extra.location }}"
      },
      {%- endif %}
      "priceRange": "$$"
    }
    </script>
    {%- endif %}

    {%- block extra_head %}{% endblock extra_head %}
</head>

<body>

<a href="#main-content" class="skip-link">Skip to main content</a>

<nav class="navbar" aria-label="Main navigation">
    <div class="navbar__inner">
        <a href="/" class="navbar__logo">
            {%- if config.extra.logo_image %}
            <img src="{{ config.extra.logo_image }}" alt="{{ config.title }} logo" class="navbar__logo-img">
            {%- endif %}
            <span>{{ config.extra.logo_text | default(value=config.title) }}</span>
        </a>

        <input type="checkbox" id="nav-toggle" class="navbar__toggle-input">

        <div class="navbar__menu">
        {%- if config.extra.menu_items %}
        {%- if page %}
            {%- set current_path = page.permalink %}
        {%- elif section %}
            {%- set current_path = section.permalink %}
        {%- else %}
            {%- set current_path = config.base_url %}
        {%- endif %}
        <ul class="navbar__links">
        {%- for item in config.extra.menu_items %}
            {%- set item_url = item.url | replace(from="$BASE_URL", to=config.base_url) %}
            {%- if item_url is starting_with("#") and current_path != config.base_url and current_path != config.base_url ~ "/" %}
                {%- set item_url = "/" ~ item_url %}
            {%- endif %}
            <li><a href="{{ item_url }}"{% if item_url == current_path %} aria-current="page"{% endif %}>{{ item.name }}</a></li>
        {%- endfor %}
        </ul>
        {%- endif %}
        </div>

        <label for="nav-toggle" class="navbar__hamburger" role="button" aria-label="Toggle menu" aria-expanded="false">
            <span></span><span></span><span></span>
        </label>
    </div>
</nav>

<main class="main" id="main-content">
    {% block content %}{% endblock content %}
</main>

<footer class="footer">
    <div class="footer__inner">
        <div class="footer__bottom">
            {%- if config.extra.copyright_html %}
            <div class="copyright">{{ config.extra.copyright_html | safe }}</div>
            {%- endif %}
            <div class="footer__contact">
                {%- if config.extra.contact_email %}
                <a href="mailto:{{ config.extra.contact_email }}">{{ config.extra.contact_email }}</a>
                {%- endif %}
                {%- if config.extra.contact_email and config.extra.contact_phone %}
                <span class="footer__sep">&middot;</span>
                {%- endif %}
                {%- if config.extra.contact_phone %}
                <a href="tel:{{ config.extra.contact_phone }}">{{ config.extra.contact_phone }}</a>
                {%- endif %}
            </div>
        </div>
    </div>
</footer>

{%- block extra_body %}{% endblock extra_body %}
<script>
(function() {
  var toggle = document.getElementById('nav-toggle');
  var label = document.querySelector('.navbar__hamburger');
  if (toggle && label) {
    toggle.addEventListener('change', function() {
      label.setAttribute('aria-expanded', toggle.checked ? 'true' : 'false');
    });
  }
  var navLinks = document.querySelectorAll('.navbar__links a');
  for (var i = 0; i < navLinks.length; i++) {
    navLinks[i].addEventListener('click', function() {
      if (toggle && toggle.checked) {
        toggle.checked = false;
        if (label) label.setAttribute('aria-expanded', 'false');
      }
    });
  }
})();
</script>
</body>
</html>
