/* Landing Page Styles - SJF Portal (RTL + Responsive + Clean)
   File: 00-variables-resets.css
*/

/* =========================
   1) Variables
========================= */

:root {
  --primary-blue: #063572;
  --primary-blue-dark: #042655;
  --primary-blue-light: #08448f;

  --accent-orange: #ff9f00;
  --accent-orange-dark: #e68f00;
  --accent-orange-light: #ffb333;

  --text-dark: #1a1a1a;
  --text-secondary: #4b5563;
  --text-light: #6b7280;

  --bg-light: #f8fafc;
  --bg-white: #ffffff;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.2);

  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  --gradient-primary: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
  --gradient-accent: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-dark));

  /* =========================
     Global Layout System
  ========================= */
  --nav-h: 88px;
  --page-pad: 80px;
  --container-max: 1280px;
  --divider-top: 48px;
  --divider-bottom: 47px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
}

@media (max-width: 768px) {
  :root {
    --page-pad: 20px;
  }
}

/* =========================
   2) Resets
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: "Tajawal", sans-serif;
  font-size: 16px;
  line-height: 1.75;

  direction: rtl;
  text-align: right;

  color: var(--text-dark);
  overflow-x: hidden;

  min-height: 100vh;
  display: flex;
  flex-direction: column;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sticky footer: main grows so footer stays at bottom */
body > main {
  flex: 1 0 auto;
}

body > .header,
body > .footer-ijf {
  flex-shrink: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Cairo", sans-serif;
  line-height: 1.25;
}

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

a,
button {
  transition: var(--transition);
}

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

*:focus-visible {
  outline: 3px solid var(--accent-orange);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: var(--accent-orange);
  color: #fff;
}

/* =========================
   3) IMPORTANT: Avoid Bootstrap conflict
   - لا نلمس .container نهائياً (Bootstrap يستخدمه)
   - نحن نستخدم فقط .container-rtl للـ Landing
========================= */
.container-rtl {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  position: relative;
}

/* إذا بدك Container خاص بصفحات Bootstrap بدون ما ينعكس على landing */
.bootstrap-container {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 12px;
}

/* =========================
   4) Sections (safe defaults)
========================= */
section {
  position: relative;
  scroll-margin-top: 80px;
  overflow: visible;
  /* لا نقص dropdown/shadows */
}

.landing-section {
  padding-block: 64px;
}

@media (max-width: 768px) {
  .landing-section {
    padding-block: 36px;
  }
}

.hidden {
  display: none !important;
}

/* =========================
   5) Divider (48 فوق / 47 تحت)
========================= */
/* =========================
   5) Divider (GLOBAL) - FINAL
   ✅ Inset على نفس هوامش الصفحة
   ✅ بدون أي ألوان غريبة أو Full width
========================= */
/* =========================
   Section Divider – FINAL (SAFE)
========================= */
/* =========================
   Section Divider – FINAL
========================= */
.section-divider {
  height: 2px;
  /* ⬅️ أسمك شوي ليبين */
  background: linear-gradient(to left,
      transparent,
      rgba(6, 53, 114, 0.35),
      rgba(6, 53, 114, 0.45),
      rgba(6, 53, 114, 0.35),
      transparent);

  width: calc(100% - (var(--page-pad) * 2));
  max-width: var(--container-max);

  margin: 0 auto;
  border-radius: 999px;
}

@media (max-width: 768px) {
  .section-divider {
    margin: 28px auto;
  }
}

/* Optional helpers */
.safe-wrap {
  overflow-wrap: anywhere;
  word-break: break-word;
}

input,
textarea {
  font-family: "Tajawal", sans-serif;
}

@media (max-width: 768px) {
  :root {
    --page-pad: 20px;
    --divider-top: 26px;
    --divider-bottom: 26px;
  }
}

#news,
#top-athletes,
.learn-more-section,
.partners-section {
  background: #fff !important;
}