/* ============================================
   GES Logistics KSA - Scoped Main Stylesheet
   NON-CONFLICTING with Webflow template
   All styles are prefixed with .ges- to avoid conflicts
   ============================================ */

/* Import Variables */
@import url('variables.css');

/* ===== SCOPED STYLES - Only apply when .ges-content class is present ===== */

.ges-content {
  /* Typography */
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-700);
}

.ges-content h1,
.ges-content h2,
.ges-content h3,
.ges-content h4,
.ges-content h5,
.ges-content h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-navy);
  margin-bottom: var(--space-4);
}

.ges-content h1 { font-size: var(--font-size-5xl); letter-spacing: -0.02em; }
.ges-content h2 { font-size: var(--font-size-4xl); letter-spacing: -0.01em; }
.ges-content h3 { font-size: var(--font-size-3xl); }
.ges-content h4 { font-size: var(--font-size-2xl); }
.ges-content h5 { font-size: var(--font-size-xl); }
.ges-content h6 { font-size: var(--font-size-lg); }

.ges-content p {
  margin-bottom: var(--space-4);
}

.ges-content a {
  color: var(--color-teal-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

.ges-content a:hover {
  color: var(--color-teal-dark);
}

/* ===== NO GLOBAL RESETS - Webflow handles its own ===== */
/* DO NOT use: *, body, html global selectors */

/* ===== Component Imports (Scoped) ===== */
@import url('components/buttons.css');
@import url('components/hero.css');

/* Note: Other component imports removed to prevent conflicts */