/*
Theme Name: Best Doctore
Theme URI: https://bestdoctore.com
Author: Best Doctore Agency
Author URI: https://bestdoctore.com
Description: قالب ووردبريس احترافي مخصص لوكالة Best Doctore للتسويق الطبي. تصميم فائق الحداثة مع دعم كامل للغة العربية RTL، حركات GSAP، Glassmorphism، وأداء ممتاز لـ Core Web Vitals. يعمل بشكل مستقل بدون Page Builder.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bestdoctore
Tags: medical, marketing, agency, rtl-language-support, custom-colors, custom-menu, translation-ready, wide-blocks
*/

/* ═══════════════════════════════════════════════
   Best Doctore Theme · Design Tokens
   ═══════════════════════════════════════════════ */

:root {
  /* Colors */
  --navy-950: #05132a;
  --navy-900: #071a3a;
  --navy-800: #0d234f;
  --navy-700: #163a7a;
  --blue-600: #1855d4;
  --blue-500: #1e6cff;
  --blue-400: #3d8bff;
  --blue-100: #e0edff;
  --cyan-500: #06b6d4;
  --cyan-400: #22d3ee;
  --cyan-300: #67e8f9;
  --orange-600: #ea580c;
  --orange-500: #ff7a1a;
  --orange-400: #ff9a4d;
  --white: #ffffff;
  --slate-50: #f5f8ff;
  --slate-100: #eef2fb;
  --slate-200: #d9e0f0;
  --slate-500: #64748b;
  --slate-700: #334155;
  --slate-900: #0f172a;
  --success: #10b981;
  --danger: #ef4444;

  /* Gradients */
  --grad-hero: linear-gradient(135deg, #05132a 0%, #0d234f 55%, #163a7a 100%);
  --grad-accent: linear-gradient(135deg, #1e6cff 0%, #22d3ee 100%);
  --grad-orange: linear-gradient(135deg, #ff7a1a 0%, #ff9a4d 100%);

  /* Typography */
  --font-heading: 'Cairo', 'Tajawal', system-ui, sans-serif;
  --font-body: 'Tajawal', system-ui, sans-serif;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(5,19,42,0.06);
  --shadow-md: 0 8px 24px rgba(5,19,42,0.10);
  --shadow-lg: 0 20px 50px rgba(5,19,42,0.14);
  --shadow-glow-blue: 0 8px 30px rgba(30,108,255,0.30);
  --shadow-glow-orange: 0 8px 30px rgba(255,122,26,0.40);

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
}

/* ═══════════════════════════════════════════════
   Reset + Base
   ═══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--white);
  color: var(--slate-900);
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue-500); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--orange-500); }

button { font-family: inherit; cursor: pointer; }

/* ═══════════════════════════════════════════════
   Container
   ═══════════════════════════════════════════════ */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ═══════════════════════════════════════════════
   Typography
   ═══════════════════════════════════════════════ */

h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--navy-950); margin-top: 0; }
h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 900; line-height: 1.15; letter-spacing: -0.5px; }
h2 { font-size: clamp(26px, 3.8vw, 42px); font-weight: 900; line-height: 1.2; }
h3 { font-size: clamp(20px, 2.5vw, 26px); font-weight: 800; line-height: 1.3; }
h4 { font-size: 18px; font-weight: 800; }

p { margin: 0 0 16px; }

.gradient-text {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.highlight {
  background: linear-gradient(180deg, transparent 65%, rgba(255,122,26,0.28) 65%);
  padding: 0 4px;
}

/* ═══════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
  border: none;
  text-decoration: none;
  transition: all 0.25s;
  cursor: pointer;
}

.btn-primary {
  background: var(--grad-orange);
  color: white;
  box-shadow: var(--shadow-glow-orange);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255,122,26,0.5);
  color: white;
}

.btn-secondary { background: var(--navy-800); color: white; }
.btn-secondary:hover { background: var(--navy-700); color: white; }

.btn-outline {
  background: transparent;
  color: var(--blue-500);
  border: 2px solid var(--blue-500);
}
.btn-outline:hover { background: var(--blue-500); color: white; }

.btn-glass {
  background: rgba(255,255,255,0.10);
  color: white;
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-glass:hover { background: rgba(255,255,255,0.18); color: white; }

.btn.lg { padding: 16px 32px; font-size: 17px; }
.btn.sm { padding: 8px 16px; font-size: 13px; }

/* ═══════════════════════════════════════════════
   Reveal Animations (JS-triggered)
   ═══════════════════════════════════════════════ */

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.stagger-child { opacity: 0; transform: translateY(20px); transition: opacity 0.6s, transform 0.6s; }
.stagger-parent.is-visible .stagger-child { opacity: 1; transform: translateY(0); }
.stagger-parent.is-visible .stagger-child:nth-child(1) { transition-delay: 0ms; }
.stagger-parent.is-visible .stagger-child:nth-child(2) { transition-delay: 100ms; }
.stagger-parent.is-visible .stagger-child:nth-child(3) { transition-delay: 200ms; }
.stagger-parent.is-visible .stagger-child:nth-child(4) { transition-delay: 300ms; }
.stagger-parent.is-visible .stagger-child:nth-child(5) { transition-delay: 400ms; }
.stagger-parent.is-visible .stagger-child:nth-child(6) { transition-delay: 500ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .stagger-child { opacity: 1 !important; transform: none !important; }
}