/**
 * Protect Vision — Modern High-End Typography System
 * Primary Headline Font: Plus Jakarta Sans (Variable 400-800)
 * Primary Body & UI Font: Inter (Variable 300-800)
 * 100% Self-Hosted & DSGVO-konform (Zero External Third-Party Requests)
 */

/* ==========================================================================
   1. FONT-FACE DEFINITIONS (WOFF2 VARIABLE FONTS)
   ========================================================================== */

/* Plus Jakarta Sans (Headlines, Branding, Numbers) - Latin-Ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Plus Jakarta Sans (Headlines, Branding, Numbers) - Latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter (Body, UI, Specifications) - Latin-Ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter (Body, UI, Specifications) - Latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter Italic */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. SYSTEM VARIABLES & THEME ASSIGNMENTS
   ========================================================================== */

:root, :host {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --default-font-family: var(--font-sans);
  --th-body-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --th-headline-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --th-logo-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   3. GLOBAL TEXT RENDERING & MODERN BASE STYLING
   ========================================================================== */

html, body, [data-theme="metadesign"] {
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   4. HEADLINE & BRAND TYPOGRAPHY (PLUS JAKARTA SANS)
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.headline-font,
[data-theme="metadesign"] h1,
[data-theme="metadesign"] h2,
[data-theme="metadesign"] h3,
[data-theme="metadesign"] h4,
[data-theme="metadesign"] h5,
[data-theme="metadesign"] h6 {
  font-family: var(--font-heading) !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  color: #0f172a;
}

h1, [data-theme="metadesign"] h1 {
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.15 !important;
}

h2, [data-theme="metadesign"] h2 {
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
}

h3, [data-theme="metadesign"] h3 {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

h4, h5, h6 {
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}

/* ==========================================================================
   5. BODY TEXT, LISTS & FORMS (INTER)
   ========================================================================== */

p, li, dd, dt, td, th {
  font-family: var(--font-sans);
  letter-spacing: -0.011em;
}

p {
  line-height: 1.68;
}

input, textarea, select, button {
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}

/* Modern Pill Badges & Section Eyebrows */
.eyebrow, [class*="tracking-widest"], [class*="tracking-wider"] {
  letter-spacing: 0.05em !important;
  font-weight: 600;
}

/* Tabular Numbers for Pricing & Specs */
.font-mono, [class*="tabular-nums"], .stat-number {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   6. RESPONSIVE DESKTOP TYPOGRAPHY SCALING
   ========================================================================== */

@media (min-width: 1024px) {
  html {
    font-size: 18px !important;
  }
  body {
    line-height: 1.65;
  }
  p, li {
    letter-spacing: -0.011em;
  }
  .text-xs {
    font-size: 0.825rem !important;
    line-height: 1.35 !important;
  }
  .text-sm {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }
  .text-base {
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
  }
  .text-lg {
    font-size: 1.175rem !important;
    line-height: 1.55 !important;
  }
  .text-xl {
    font-size: 1.325rem !important;
    line-height: 1.4 !important;
  }
  .text-2xl {
    font-size: 1.65rem !important;
    line-height: 1.3 !important;
  }
  .text-3xl {
    font-size: 2.15rem !important;
    line-height: 1.2 !important;
  }
  .text-4xl {
    font-size: 2.75rem !important;
    line-height: 1.15 !important;
  }
}

@media (min-width: 1440px) {
  html {
    font-size: 19px !important;
  }
  .text-sm {
    font-size: 0.965rem !important;
  }
  .text-base {
    font-size: 1.075rem !important;
  }
}

/* ==========================================================================
   7. NAVIGATION & MOBILE HAMBURGER MENU ENHANCEMENTS
   ========================================================================== */

.silo-menu-trigger {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.silo-menu-trigger * {
  pointer-events: none;
}

nav.silo-menu-open .silo-menu-panel,
.silo-menu-checkbox:checked ~ nav .silo-menu-panel {
  max-height: 85vh !important;
  opacity: 1 !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
}

nav.silo-menu-open .silo-menu-icon-close,
.silo-menu-checkbox:checked ~ nav .silo-menu-icon-close {
  display: block !important;
}

nav.silo-menu-open .silo-menu-icon-open,
.silo-menu-checkbox:checked ~ nav .silo-menu-icon-open {
  display: none !important;
}