/* =============================================================
   Custom styles for georgeiskef.dev
   Loaded BEFORE tailwind.css so Tailwind utilities win ties,
   exactly as the original Tailwind Play CDN setup behaved.

   Metric system:
   - Layout metrics (width, height, margin, padding, gaps) use
     relative units (%, vw/vh).
   - Font sizes use pixel units (px).
   ============================================================= */

/* ---------- Header controls ---------- */
#langSelectBtn,
.nav-link {
  font-size: 18px;
}

/* ---------- Pixel typography scale ---------- */
.text-xs-px   { font-size: 12px; line-height: 16px; }
.text-sm-px   { font-size: 14px; line-height: 20px; }
.text-base-px { font-size: 16px; line-height: 24px; }
.text-lg-px   { font-size: 18px; line-height: 28px; }
.text-xl-px   { font-size: 20px; line-height: 28px; }
.text-2xl-px  { font-size: 24px; line-height: 32px; }
.text-3xl-px  { font-size: 30px; line-height: 36px; }
.text-4xl-px  { font-size: 36px; line-height: 40px; }
.text-5xl-px  { font-size: 48px; line-height: 52px; }

/* ---------- Glassmorphism surfaces ---------- */
.glass-card {
  background: rgba(15, 23, 42, 0.75);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-nav {
  background: rgba(2, 6, 23, 0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------- RTL (Arabic) ---------- */
[dir="rtl"] {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

/* ---------- Code blocks ---------- */
pre code {
  font-size: 13px !important;
  line-height: 18px !important;
}

/* ---------- Hero metric numbers ---------- */
.hero-stat {
  font-size: 24px;
  line-height: 32px;
  white-space: nowrap;
}

@media (max-width: 639px) {
  .hero-stat {
    font-size: 19px;
    line-height: 26px;
  }
}