<!DOCTYPE html>
<html lang="en">
  <head>
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' https:; connect-src 'self' https: https://*.xn--nva-sna.se https://*.a.run.app data:; img-src 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' https: data:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; upgrade-insecure-requests;">
    <meta charset="UTF-8">
    <meta name="google-site-verification" content="7qFEqwzTZ9Qp14ncyLJk6MURAJdxhVzU62c1a816Pg8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=yes">
    <title>NÖVA</title>
    
    <!-- Core Web Vitals optimization -->
    <meta name="theme-color" content="#1a237e">
    
    <!-- PWA Meta Tags -->
    <meta name="description" content="NÖVA: Turn real-world news into personalized, interactive learning experiences — helping users improve their language skills while staying informed.">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="NÖVA">
    
    <!-- iOS PWA specific enhancements -->
    <link rel="apple-touch-icon" sizes="180x180" href="/pwa-icons/icon-180x180.png">
    <link rel="apple-touch-icon" sizes="192x192" href="/pwa-icons/icon-192x192.png">
    <link rel="apple-touch-icon" sizes="512x512" href="/pwa-icons/icon-512x512.png">
    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" href="/pwa-icons/splash-828x1792.png">
    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" href="/pwa-icons/splash-1242x2688.png">
    <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/pwa-icons/splash-1125x2436.png">
    
    <!-- Resource hints - prioritized and deduplicated -->
    <link rel="preconnect" href="/" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- API preconnect removed - using relative paths via Firebase Hosting rewrites -->
    
    <!-- Optimized Google Fonts loading (non-blocking) -->
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Titan+One&display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Titan+One&display=swap" media="print" onload="this.media='all'">
    <noscript>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Titan+One&display=swap">
    </noscript>
    
    <!-- Critical assets for LCP preload -->
    <link rel="prefetch" href="/pwa-icons/icon-128x128.png" as="image">
    
    <!-- Critical CSS for article descriptions -->
    <style>
      /* Critical article description styles for LCP */
      .article-description {
        font-size: 1.15rem;
        line-height: 1.5;
        color: rgba(13, 17, 23, 0.8);
        margin: 0;
        padding: 0;
        transform: translateZ(0);
        content-visibility: auto;
      }
      
      @media (max-width: 768px) {
        .article-description {
          font-size: 1.15rem;
          line-height: 1.5;
          color: #1f2937;
          font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
          font-weight: 400;
          display: block;
        }
      }
    </style>
    
    <!-- Preload critical modules - deferred after critical CSS -->
    <link rel="modulepreload" href="data:text/javascript;base64,Ly8gbWFpbi5qcwovLyBDcml0aWNhbCBpbXBvcnRzIGZpcnN0CmltcG9ydCB7IGNyZWF0ZUFwcCB9IGZyb20gJ3Z1ZScKaW1wb3J0IEFwcCBmcm9tICcuL0FwcC52dWUnCgovLyBJbXBvcnQgY3JpdGljYWwgQ1NTCmltcG9ydCAnLi9hc3NldHMvc3R5bGVzL2NyaXRpY2FsLmNzcycKCi8vIE5vbi1jcml0aWNhbCBpbXBvcnRzCmltcG9ydCB7IGNyZWF0ZVBpbmlhIH0gZnJvbSAncGluaWEnCmltcG9ydCByb3V0ZXIgZnJvbSAnLi9yb3V0ZXInCmltcG9ydCAnLi9yZWdpc3RlclNXJwppbXBvcnQgcXVlcnlQbHVnaW4gZnJvbSAnLi9wbHVnaW5zL3F1ZXJ5JwppbXBvcnQgeyBvcm1QbHVnaW4gfSBmcm9tICcuL21vZGVscycKCi8vIEltcG9ydCBWdWV0aWZ5IHdpdGggY29tcG9uZW50cwppbXBvcnQgeyBjcmVhdGVWdWV0aWZ5IH0gZnJvbSAndnVldGlmeScKaW1wb3J0ICd2dWV0aWZ5L3N0eWxlcycKaW1wb3J0ICdAbWRpL2ZvbnQvY3NzL21hdGVyaWFsZGVzaWduaWNvbnMuY3NzJyAvLyBWdWV0aWZ5IGljb25zCgovLyBJbXBvcnQgb25seSBlc3NlbnRpYWwgQm9vdHN0cmFwIGNvbXBvbmVudHMgdG8gcmVkdWNlIGJ1bmRsZSBzaXplCmltcG9ydCAnYm9vdHN0cmFwL2Rpc3QvY3NzL2Jvb3RzdHJhcC1ncmlkLm1pbi5jc3MnCgovLyBDcmVhdGUgYXBwIGluc3RhbmNlIGJ1dCBkZWZlciBtb3VudGluZyB0byBpbXByb3ZlIFRUSSAoVGltZSB0byBJbnRlcmFjdGl2ZSkKY29uc3QgYXBwID0gY3JlYXRlQXBwKEFwcCkKCi8vIERlZmVyIG5vbi1jcml0aWNhbCBDU1MKaW1wb3J0KCcuL2Fzc2V0cy9zdHlsZXMvbWFpbi5jc3MnKQoKLy8gSW1wb3J0IG9mZmxpbmUvbmV0d29yayBzdGF0dXMgc3VwcG9ydAppbXBvcnQgeyBpbml0TmV0d29ya1N0YXR1cyB9IGZyb20gJy4vbmV0d29yay1zdGF0dXMnCgpjb25zdCB2dWV0aWZ5ID0gY3JlYXRlVnVldGlmeSh7CiAgLy8gRW5hYmxlIHRyZWVzaGFraW5nIHRvIHJlZHVjZSBidW5kbGUgc2l6ZQogIHRyZWVzaGFraW5nOiB0cnVlCn0pCgovLyBDb25maWd1cmUgUGluaWEKY29uc3QgcGluaWEgPSBjcmVhdGVQaW5pYSgpCi8vIEFkZCBPUk0gcGx1Z2luIHRvIFBpbmlhCnBpbmlhLnVzZShvcm1QbHVnaW4pCgphcHAudXNlKHBpbmlhKQphcHAudXNlKHJvdXRlcikKYXBwLnVzZSh2dWV0aWZ5KQphcHAudXNlKHF1ZXJ5UGx1Z2luKQoKLy8gRHluYW1pY2FsbHkgaW1wb3J0IGkxOG4gdG8gcmVkdWNlIGluaXRpYWwgYnVuZGxlIHNpemUKY29uc3QgaTE4blByb21pc2UgPSBpbXBvcnQoJy4vaTE4bi9pbmRleCcpLnRoZW4oKG1vZHVsZSkgPT4gewogIGFwcC51c2UobW9kdWxlLmRlZmF1bHQpCiAgcmV0dXJuIG1vZHVsZS5kZWZhdWx0Cn0pCgovLyBJbXByb3ZlZCBhcHAgbW91bnRpbmcgc3RyYXRlZ3kgd2l0aCBwZXJmb3JtYW5jZSBtYXJraW5nCmlmICh0eXBlb2Ygd2luZG93ICE9PSAndW5kZWZpbmVkJykgewogIC8vIE1hcmsgcGVyZm9ybWFuY2UgZm9yIENvcmUgV2ViIFZpdGFscyB0cmFja2luZwogIHdpbmRvdy5wZXJmb3JtYW5jZS5tYXJrKCd2dWUtYXBwLW1vdW50LXN0YXJ0JykKCiAgLy8gUmVnaXN0ZXIgaGFuZGxlciB0byBxdWlja2x5IG1vdW50IHdoZW4gRE9NIGlzIHJlYWR5CiAgaWYgKGRvY3VtZW50LnJlYWR5U3RhdGUgPT09ICdsb2FkaW5nJykgewogICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignRE9NQ29udGVudExvYWRlZCcsIG1vdW50QXBwKQogIH0gZWxzZSB7CiAgICBxdWV1ZU1pY3JvdGFzayhtb3VudEFwcCkKICB9Cn0KCmFzeW5jIGZ1bmN0aW9uIG1vdW50QXBwKCkgewogIC8vIEVuc3VyZSBpMThuIGlzIGxvYWRlZCBiZWZvcmUgbW91bnRpbmcKICBhd2FpdCBpMThuUHJvbWlzZQoKICBhcHAubW91bnQoJyNhcHAnKQogIC8vIE1hcmsgbW91bnRpbmcgY29tcGxldGlvbiBmb3IgcGVyZm9ybWFuY2UgbWVhc3VyZW1lbnQKICB3aW5kb3cucGVyZm9ybWFuY2UubWFyaygndnVlLWFwcC1tb3VudC1lbmQnKQogIHdpbmRvdy5wZXJmb3JtYW5jZS5tZWFzdXJlKCd2dWUtYXBwLW1vdW50JywgJ3Z1ZS1hcHAtbW91bnQtc3RhcnQnLCAndnVlLWFwcC1tb3VudC1lbmQnKQoKICAvLyBJbml0aWFsaXplIG5ldHdvcmsgc3RhdHVzIGhhbmRsZXIgYWZ0ZXIgYXBwIGlzIG1vdW50ZWQgdG8gYWNjZXNzIHRvYXN0IEFQSQogIGluaXROZXR3b3JrU3RhdHVzKCkKfQo=">
    
    <!-- Content Security Policy - environment-aware -->
    <!-- CSP is now handled by Vite plugin during build process -->
    
    <!-- Protocol handling -->
    <script>
      // Protocol handling - only execute for non-localhost
      if (window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
        // Force HTTPS for production sites
        if (window.location.protocol === 'http:') {
          window.location.href = window.location.href.replace('http:', 'https:');
        }
      } else if (window.location.protocol === 'https:') {
        // Force HTTP for localhost (better dev experience)
        window.location.href = window.location.href.replace('https:', 'http:');
      }
    </script>
    
    <!-- Favicon and app icons - prioritized by size -->
    <link rel="icon" type="image/png" sizes="32x32" href="/pwa-icons/icon-32x32.png">
    
    <!-- Inline critical CSS for first contentful paint -->
    <style>
      /* Critical CSS for LCP optimization */
      :root {
        --nova-primary: #1a237e;
        --nova-logo-size: 68px;
      }

      body {
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        -webkit-text-size-adjust: 100%;
      }

      #app {
        min-height: 100vh;
        background-color: #f8f9fa;
      }
      
      /* Critical logo styles */
      .nova-logo-img {
        width: var(--nova-logo-size);
        height: var(--nova-logo-size);
        max-width: 100%;
        object-fit: contain;
        transform: translateZ(0);
      }
      
      /* Loading skeleton with optimized animations */
      .loading-skeleton {
        opacity: 0;
        transition: opacity 0.2s ease-in;
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        min-height: 200px;
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(0, 0, 0, 0.05);
        margin: 16px auto;
        max-width: 600px;
        will-change: opacity;
      }

      .loading-skeleton.visible {
        opacity: 1;
      }

      .skeleton-image {
        height: 200px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        content-visibility: auto;
      }

      .skeleton-title {
        height: 24px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        margin: 16px 16px 8px 16px;
        border-radius: 4px;
      }

      .skeleton-description {
        height: 16px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        margin: 0 16px 16px 16px;
        border-radius: 4px;
      }

      @keyframes shimmer {
        0% {
          background-position: 200% 0;
        }
        100% {
          background-position: -200% 0;
        }
      }

      /* Hide the skeleton once Vue is mounted */
      #app.vue-mounted .loading-skeleton {
        display: none;
      }
    </style>
    
    <!-- Non-critical CSS - loaded asynchronously -->
    <link rel="stylesheet" href="/assets/main.css" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="/assets/main.css"></noscript>
    <script type="module" crossorigin src="/assets/main-CfATFZi_.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vue-vendor-yo_bIn1p.js">
    <link rel="modulepreload" crossorigin href="/assets/firebase-Bv_AAX6O.js">
    <link rel="modulepreload" crossorigin href="/assets/analytics-CXxfXT7T.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-vendor-DgHWW-XH.js">
    <link rel="stylesheet" crossorigin href="/assets/main-DK2EVtRT.css">
  <link rel="manifest" href="/manifest.webmanifest"></head>
  <body>
    <div id="app">
      <!-- Loading skeleton that will be hidden once Vue mounts -->
      <div class="loading-skeleton">
        <div class="skeleton-image" role="img" aria-label="Loading image placeholder" style="width:100%;height:200px">
          <img src="/pwa-icons/icon-128x128.png" alt="NÖVA Logo" class="nova-logo-img" style="position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); opacity:0.2;">
        </div>
        <div class="skeleton-title"></div>
        <div class="skeleton-description"></div>
      </div>
    </div>
    
    <!-- Primary application script -->
    
    <!-- Fallback for browsers without JavaScript -->
    <noscript>
      <div style="padding: 2rem; text-align: center;">
        <h1>NÖVA News</h1>
        <p>This application requires JavaScript to run. Please enable JavaScript in your browser settings.</p>
      </div>
    </noscript>

    <!-- Immediate-execution script for performance -->
    <script>
      // Show skeleton with minimal delay to prevent flashing
      requestAnimationFrame(() => {
        const skeleton = document.querySelector('.loading-skeleton');
        if (skeleton) skeleton.classList.add('visible');
      });

      // Mark Vue mount completion
      window.addEventListener('load', () => {
        const app = document.getElementById('app');
        if (app) {
          app.classList.add('vue-mounted');
          // Report LCP for analytics
          if (window.performance && performance.mark) {
            performance.mark('app-mounted');
          }
        }
      }, {passive: true});
    </script>
  </body>
</html>
