<!DOCTYPE html>
<html lang="it">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Favicon Implementation -->
  <link rel="icon" type="image/x-icon" href="/favicon-teo.ico">
  <link rel="shortcut icon" type="image/x-icon" href="/favicon-teo.ico">
  <link rel="apple-touch-icon" href="/favicon-teo.ico">
  <meta name="msapplication-TileImage" content="/favicon-teo.ico">
  <meta name="theme-color" content="#1a1a1a">

  <!-- PWA Meta Tags per Retention -->
  <link rel="manifest" href="/manifest.json">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="TeologiaUno">
  <meta name="mobile-web-app-capable" content="yes">

  <meta http-equiv="Content-Security-Policy"
    content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.youtube.com https://*.youtube.com https://s.ytimg.com https://pagead2.googlesyndication.com https://www.googletagmanager.com https://www.google-analytics.com https://www.paypal.com https://www.sandbox.paypal.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self' https://www.google-analytics.com https://www.googletagmanager.com https://*.googletagmanager.com https://www.paypal.com https://www.sandbox.paypal.com https://*.supabase.co wss://*.supabase.co https://www.youtube.com https://fonts.googleapis.com; frame-src https://www.youtube.com https://*.youtube.com https://www.paypal.com https://www.sandbox.paypal.com; media-src 'self' https://*.youtube.com https://www.youtube.com;" />

  <!-- Preload critical resources for LCP optimization -->
  <!-- Manual preloads removed - Vite handles automatic preloading during build -->
  <!-- FORENSIC FIX (Phase 2): Removed /src/ path preloads causing 404 errors in production -->

  <!-- DNS prefetch for external resources -->
  <link rel="dns-prefetch" href="https://bieninjndxkigbniyeju.supabase.co">
  <!-- Google Fonts dns-prefetch (restored) -->
  <link rel="dns-prefetch" href="https://fonts.googleapis.com">
  <link rel="dns-prefetch" href="https://fonts.gstatic.com" crossorigin>
  <link rel="dns-prefetch" href="https://pagead2.googlesyndication.com">
  <link rel="dns-prefetch" href="https://www.googletagmanager.com">

  <!-- Preconnect for critical origins (SEO optimization) -->
  <link rel="preconnect" href="https://bieninjndxkigbniyeju.supabase.co" crossorigin>
  <!-- Google Fonts preconnect (restored) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preconnect" href="https://pagead2.googlesyndication.com" crossorigin>

  <!-- Preload Inter 700 (restored) -->
  <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap" fetchpriority="high">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap" media="print" onload="this.media='all'">
  <noscript>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap">
  </noscript>

  <!-- Prevent font loading layout shifts -->
  <style>
    /* Critical CSS to prevent FOUT/FOIT */
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
      font-display: swap;
    }

    /* Reserve space for common elements */
    .loading-placeholder {
      min-height: 200px;
      background: #f3f4f6;
      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .5;
      }
    }

    /* Prevent layout shifts during initial load */
    #root {
      min-height: 100vh;
      contain: layout style;
    }
  </style>

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />

  <!-- Critical inline styles -->
  <style>
    /* Critical CSS per evitare FOUC e ottimizzare LCP */
    :root {
      --primary-color: #3b82f6;
    }

    body {
      margin: 0;
      /* Restore Inter font for headings */
      font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
      background-color: #ffffff;
      color: #1f2937;
      transition: background-color 0.2s, color 0.2s;
    }

    .dark body {
      background-color: #1f2937;
      color: #f9fafb;
    }

    #root {
      min-height: 100vh;
      contain: layout style paint;
    }

    /* LCP optimization - reserve space for logo */
    .logo-container {
      width: 128px;
      height: 128px;
      display: block;
      margin: 0 auto;
      background: #f3f4f6;
      border-radius: 50%;
      contain: layout style;
    }

    /* Critical above-the-fold styles */
    .hero-section {
      min-height: 60vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 2rem 1rem;
    }

    .hero-title {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
      line-height: 1.2;
    }

    @media (min-width: 768px) {
      .hero-title {
        font-size: 3rem;
      }
    }

    /* Loading spinner critico */
    .page-loader {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 200px;
    }

    .spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #f3f4f6;
      border-top: 4px solid var(--primary-color);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>

  <!-- Critical theme script inlined -->
  <script>
    (function () {
      const theme = localStorage.getItem('theme');
      if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
      }
    })();
  </script>

  <!-- Debug script inlined -->
  <script>
    if (typeof window !== 'undefined') {
      window.DEBUG = false;
    }
  </script>

  <!-- Performance optimization script -->
  <!-- FORENSIC FIX (Phase 2): Removed dynamic preload script with /src/ paths -->
  <!-- Vite automatically handles module preloading during build process -->

  <!-- SEO Meta Tags -->
  <meta name="description" content="Teologia1 - Archivio completo di testi sacri, salmi, catechesi e risorse teologiche. Esplora l'Antica e Nuova Alleanza, Mishnah, Pedalion e oltre 321 documenti.">
  <meta name="keywords" content="teologia, bibbia, salmi, catechesi, testi sacri, antica alleanza, nuova alleanza, mishnah, pedalion">
  <meta name="author" content="Teologia1">
  <link rel="canonical" href="https://teologia1.it/">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://teologia1.it/">
  <meta property="og:title" content="Teologia1 - Archivio Testi Sacri e Risorse Teologiche">
  <meta property="og:description" content="Archivio completo di testi sacri, salmi, catechesi e risorse teologiche. Oltre 321 documenti per lo studio e l'approfondimento.">
  <meta property="og:image" content="https://teologia1.it/og-image.jpg">
  <meta property="og:locale" content="it_IT">
  <meta property="og:site_name" content="Teologia1">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="https://teologia1.it/">
  <meta name="twitter:title" content="Teologia1 - Archivio Testi Sacri">
  <meta name="twitter:description" content="Archivio completo di testi sacri, salmi, catechesi e risorse teologiche.">
  <meta name="twitter:image" content="https://teologia1.it/twitter-card.jpg">

  <!-- Robots directives -->
  <meta name="robots" content="index, follow">
  <meta name="googlebot" content="index, follow">

  <title>Teologia1</title>
  <!-- Schema.org JSON-LD -->
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "Teologia1",
      "url": "https://teologia1.it/",
      "description": "Archivio completo di testi sacri, salmi, catechesi e risorse teologiche",
      "publisher": {
        "@type": "Organization",
        "name": "Teologia1",
        "url": "https://teologia1.it/"
      },
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://teologia1.it/search?q={search_term_string}",
        "query-input": "required name=search_term_string"
      }
    }
  </script>
  <script type="module" crossorigin src="/assets/index-C7XzfMUl.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index-Hk33rNqO.css">
</head>

<body>
  <div id="root"></div>

  <!-- CSS stylesheets -->
  <!-- FORENSIC FIX (Phase 2): Removed manual CSS links - Vite injects these automatically -->

  <!-- Main application script -->

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-7P5KBKJBGL"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-7P5KBKJBGL');
  </script>
</body>

</html>