<!DOCTYPE HTML>
<html lang="da">
<head>
    <!-- Dynamisk titel for SEO -->
    <title>{% block title %} - {{ page_title }}{% endblock %}</title>

    <!-- Karakter-encoding -->
    <meta charset="utf-8">

    <!-- Responsivt layout -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

    <!-- Beskrivelse til søgemaskiner -->
    <meta name="description" content="{{ meta_description | default('Din ultimative guide til Portugal og vores rejse mod en frisk start.') }}">

    <!-- Nøgleord til søgemaskiner -->
    <meta name="keywords" content="{{ meta_keywords | default('Portugal, FAQ, Rejser, Henrik, Erika, Flytte til Portugal, Livskvalitet') }}">

    <!-- Forfatter -->
    <meta name="author" content="Henrik og Erika">

    <!-- Kritisk CSS for at forhindre FOUC -->
    <style>
        /* Kritisk CSS for hurtig rendering */
        body {
            visibility: hidden;
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
        }

        .is-preload #wrapper {
            opacity: 0;
            transition: opacity 0.3s ease-in;
        }

        @font-face {
            font-family: 'FontAwesome';
            src: url('/static/webfonts/fa-solid-900.woff2') format('woff2');
            font-weight: 900;
            font-style: normal;
        }
        .fa {
            font-family: 'FontAwesome';
            font-style: normal;
            font-weight: 900;
        }
    </style>

    <!-- Kritisk skrifttype preload -->
    <link rel="preload" href="/static/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin="anonymous">

    <!-- Hoved CSS -->
    <link rel="stylesheet" href="/static/css/main.css?v={{ timestamp }}" media="print" onload="this.media='all'">

    <!-- Fallback for brugere uden JavaScript -->
    <noscript>
        <link rel="stylesheet" href="/static/css/main.css?v={{ timestamp }}">
    </noscript>
</head>
<body class="is-preload" lang="da">
<script>
    // Fjern preload-klasse og vis siden, når alt er indlæst
    window.addEventListener('load', () => {
        document.body.classList.remove('is-preload');
        document.body.style.visibility = 'visible';
    });
</script>

<!-- Wrapper -->
<div id="wrapper">
    <!-- Main -->
    <div id="main">
        <div class="inner">
            <!-- Header -->
            <header id="header">
                <a href="/" class="logo">
                    <strong>{{ page_title }}</strong> af {{ author }}
                </a>
            </header>

            <!-- Content -->
            {% block content %}{% endblock %}

            <!-- Footer -->
            <footer id="main-footer">
                {% if request.state.next_category %}
                    <p>
                        <a href="/category/{{ request.state.next_category.path }}" class="footer-link">
                            {{ request.state.next_category.description }}
                        </a>
                    </p>
                {% endif %}
            </footer>
        </div> <!-- Closing inner div -->
    </div> <!-- Closing main div -->

    <!-- Sidebar -->
    <div id="sidebar">
        <div class="inner">
            {% include 'navigation.html' %}
            <!-- Footer -->
            <footer id="sidebar-footer">
                <p class="copyright">
                    &copy; Henriks lille hjørne: <a href="https://lifefaq.i80.dk">LifeFAQ</a>
                </p>
            </footer>
        </div> <!-- Closing sidebar-inner div -->
    </div> <!-- Closing sidebar div -->
</div> <!-- Closing wrapper div -->

<!-- Scripts med defer for at undgå blokerende indlæsning -->
<script src="/static/js/jquery.min.js" defer></script>
<script src="/static/js/browser.min.js" defer></script>
<script src="/static/js/breakpoints.min.js" defer></script>
<script src="/static/js/util.js" defer></script>
<script src="/static/js/main.js" defer></script>
<script src="/static/js/modal_handler.js?v={{ timestamp }}" defer></script>
<script>
if (navigator.userAgent.includes("Lighthouse")) {
    document.querySelector("#burger-menu").style.pointerEvents = "none";
}
</script>
</body>
</html>
