/* ============================================
   TAJ PHARMA SCIENTIFIC BUREAU
   Design System & Main Styles
   ============================================ */

/* Import Outfit Font */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* ============================================
   DESIGN TOKENS
   ============================================ */

:root {
  /* LIGHT Theme Tokens (Default) */
  --primary: #B11212;
  --primary-hover: #8F0E0E;
  --secondary: #E6B450;
  --secondary-hover: #D4A03D;
  --background: #FAFAFA;
  --surface: #FFFFFF;
  --surface-alt: #F5F5F5;
  --foreground: #1F1F1F;
  --muted: #6B7280;
  --border: #E5E7EB;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-default: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Typography */
  --font-primary: 'Outfit', sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.6;

  /* Spacing */
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-5xl: 6rem;
  /* Section padding */

  /* Radius */
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Header Height */
  --header-height: 80px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
}

/* DARK Theme Tokens */
body.dark-theme {
  --primary: #D93030;
  /* Lighter red for dark mode */
  --primary-hover: #E55050;
  --secondary: #E6B450;
  --secondary-hover: #F0C460;
  --background: #121212;
  --surface: #1E1E1E;
  --surface-alt: #2A2A2A;
  --foreground: #F3F4F6;
  /* Gray-100 */
  --muted: #9CA3AF;
  /* Gray-400 */
  --border: #374151;
  /* Gray-700 */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-default: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* ============================================
   RESET & BASE
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  scroll-padding-top: var(--header-height);
  /* Fixes anchor links being hidden behind header */
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--foreground);
  background-color: var(--background);
  transition: background-color var(--transition-base), color var(--transition-base);
  overflow-x: hidden;
  padding-top: var(--header-height);
}

/* ... existing code ... */

/* Hover effects only for devices that support hover to prevent sticking on mobile */
/* Hover effects enabled for all (Touch sets active state, JS prevents sticky pause) */
.partner-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-md);
  z-index: 2;
}

.partner-card:hover .partner-logo {
  filter: grayscale(0%);
  opacity: 1;
}

/* Fallback/Active state for touch if needed, or just keep static */
.partner-logo {
  max-width: 320px;
  max-height: 160px;
  width: 100%;
  height: auto;
  object-fit: contain;
  /* On touch devices, logos might stay grayscale or we can defaults them to full color if preferred.
     Let's keep them grayscale and maybe allow click to reveal if requested, but for now just removing the sticky hover. */
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.4s ease;
}

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

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
}

/* Utility Classes */
.opacity-0 {
  opacity: 0 !important;
  visibility: hidden !important;
}

.alt-bg {
  background-color: var(--surface-alt);
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.container-wide {
  max-width: 1400px;
}

/* ============================================
   HEADER & NAV
   ============================================ */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* Explicit width to prevent misalignment */
  height: var(--header-height);
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  transition: all var(--transition-base);
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

body.dark-theme .header {
  background-color: rgba(30, 30, 30, 0.9);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--spacing-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.logo {
  height: 60px;
  width: auto;
  transition: filter var(--transition-base);
}

.logo-link {
  display: flex;
  align-items: center;
}

/* DARK MODE LOGO FIX */
body.dark-theme .logo {
  filter: brightness(0) invert(1);
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
}

/* Desktop Nav */
.desktop-nav {
  display: flex;
  gap: var(--spacing-lg);
}

.nav-link {
  font-weight: 500;
  color: var(--foreground);
  position: relative;
  transition: color var(--transition-fast);
}

.nav-link:hover {
  color: var(--primary);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--secondary);
  transition: width var(--transition-base);
}

.nav-link:hover::after {
  width: 100%;
}

/* Controls (Lang, Theme, Menu) */
.controls {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.control-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--foreground);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.control-btn:hover {
  background-color: var(--surface-alt);
  border-color: var(--primary);
  color: var(--primary);
}

.lang-code {
  font-weight: 700;
  font-size: 0.875rem;
}

/* Mobile Menu Toggle */
.mobile-toggle {
  display: none;
}

/* Mobile Menu Drawer */
.mobile-menu {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--header-height));
  background-color: var(--surface);
  z-index: 999;
  transform: translateX(100%);
  transition: transform var(--transition-base);
  display: flex;
  flex-direction: column;
  padding: var(--spacing-2xl);
  border-top: 1px solid var(--border);
  overflow-y: auto;
}

[dir="rtl"] .mobile-menu {
  left: auto;
  right: 0;
  transform: translateX(-100%);
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-nav-link {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--foreground);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--border);
  transition: color var(--transition-fast);
  display: block;
  text-align: left;
}

[dir="rtl"] .mobile-nav-link {
  text-align: right;
}

.mobile-nav-link:hover {
  color: var(--primary);
  padding-left: 10px;
}

[dir="rtl"] .mobile-nav-link:hover {
  padding-left: 0;
  padding-right: 10px;
}


/* ============================================
   SECTIONS & COMPONENTS
   ============================================ */

.section {
  padding: var(--spacing-5xl) 0;
}

.section-sm {
  padding: var(--spacing-3xl) 0;
}

.section-header {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--muted);
}

.accent-divider {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: var(--radius-full);
  margin: var(--spacing-md) auto;
}

/* --- Hero --- */
.hero {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%);
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(177, 18, 18, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(230, 180, 80, 0.05) 0%, transparent 40%);
  animation: rotateGradient 60s linear infinite;
  pointer-events: none;
}

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

  100% {
    transform: rotate(360deg);
  }
}

body.dark-theme .hero {
  background: linear-gradient(135deg, #121212 0%, #1E1E1E 100%);
}

body.dark-theme .hero::before {
  background: radial-gradient(circle at center, rgba(217, 48, 48, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(230, 180, 80, 0.05) 0%, transparent 40%);
}

.hero-content {
  max-width: 900px;
  z-index: 10;
  padding: var(--spacing-xl);
}

.hero-logo {
  width: 100px;
  height: auto;
  margin: 0 auto var(--spacing-lg);
}

.hero-title {
  font-size: 3.5rem;
  line-height: 1.2;
  margin-bottom: var(--spacing-lg);
}

.hero-title .highlight {
  color: var(--primary);
  position: relative;
  display: inline-block;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--muted);
  margin-bottom: var(--spacing-2xl);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero-cta {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
  border: 2px solid transparent;
}

.btn-primary {
  background-color: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-default);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  border-color: var(--primary);
  color: var(--primary);
  background: transparent;
}

.btn-outline:hover {
  background-color: var(--primary);
  color: #fff;
}

/* --- About Cards --- */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
}

.card {
  background-color: var(--surface);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-default);
  transition: all var(--transition-base);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--secondary);
}

.card-icon {
  width: 40px;
  height: 40px;
  color: var(--primary);
  margin-bottom: var(--spacing-md);
}

.card-title {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-sm);
}

.card-description {
  color: var(--muted);
}

/* --- Mission & Vision --- */
.mission-vision-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
  align-items: flex-start;
}

.mission-box,
.vision-box {
  background: var(--surface);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.mission-box h3,
.vision-box h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary);
  margin-bottom: 1rem;
  font-size: 1.75rem;
}

/* --- Partners Marquee (CSS) --- */
.partners-marquee-wrapper {
  width: 100%;
  overflow: hidden;
  padding: var(--spacing-2xl) 0;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  position: relative;
}

.partners-marquee-track {
  display: flex;
  gap: var(--spacing-3xl);
  width: max-content;
  padding: 0 var(--spacing-xl);
  /* The animation will be handled by GSAP, but basic flex is needed here */
}

/* Adjust card for carousel */
.partner-card {
  background-color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  /* Even bigger */
  height: 320px;
  box-shadow: var(--shadow-default);
  border: 1px solid var(--border);
  transition: all var(--transition-base);
  position: relative;
  flex-shrink: 0;
  opacity: 1;
}

body.dark-theme .partner-card {
  border-color: transparent;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.partner-logo {
  max-width: 320px;
  /* Bigger logos */
  max-height: 160px;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.4s ease;
}

@media (hover: hover) {
  .partner-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-md);
    z-index: 2;
    /* Bring to front on hover */
  }

  .partner-card:hover .partner-logo {
    filter: grayscale(0%);
    opacity: 1;
  }
}

/* --- Back To Top --- */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--transition-base);
  z-index: 900;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: var(--primary-hover);
  transform: translateY(-5px);
}

/* --- Footer --- */
.footer {
  background-color: var(--surface-alt);
  padding: var(--spacing-3xl) 0 var(--spacing-xl);
  border-top: 1px solid var(--border);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-2xl);
}

.footer-section h4 {
  color: var(--foreground);
  margin-bottom: var(--spacing-md);
}

.footer-section p,
.footer-section a {
  color: var(--muted);
  margin-bottom: 0.5rem;
  display: block;
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: var(--spacing-lg);
  margin-top: var(--spacing-2xl);
  text-align: center;
  color: var(--muted);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .desktop-nav {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .mission-vision-container {
    grid-template-columns: 1fr 1fr;
  }

  /* Prevent Header Squishing on Mobile */
  .header-content {
    padding: 0 var(--spacing-md);
    /* Slightly less padding on mobile */
  }

  .logo,
  .controls {
    flex-shrink: 0;
    /* Critical: Prevent logo/buttons from shrinking */
  }
}

@media (max-width: 600px) {
  .mission-vision-container {
    grid-template-columns: 1fr;
  }

  .mission-vision-divider {
    display: none;
  }

  /* Keep partners reasonably sized on mobile, but still large */
  .partner-card {
    width: 300px;
    height: 200px;
  }

  .partner-logo {
    max-width: 200px;
    max-height: 100px;
  }
}

/* ============================================
   RTL SUPPORT (Arabic)
   ============================================ */

[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .nav-controls {
  flex-direction: row-reverse;
}

[dir="rtl"] .hero-cta {
  flex-direction: row-reverse;
}

[dir="rtl"] .mission-box h3,
[dir="rtl"] .vision-box h3 {
  flex-direction: row;
}

[dir="rtl"] .card-icon {
  float: right;
  margin-left: var(--spacing-md);
  margin-right: 0;
}

[dir="rtl"] .back-to-top {
  right: auto;
  left: 30px;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;400;500;600;700&display=swap');

[lang="ar"] {
  font-family: 'Noto Kufi Arabic', sans-serif;
}