/*
 Theme Name: Elbc Child
 Description: Child Theme für Hello Elementor mit benutzerdefiniertem Header
 Author: Abdallah
 Template: hello-elementor
 Version: 1.0
*/

/* ==========================================
   NOOR FONT - Arabic Typography
   ========================================== */

/* Noor Regular */
@font-face {
    font-family: 'Noor';
    src: url('assets/fonts/Noor-Regular.woff2') format('woff2'),
         url('assets/fonts/Noor-Regular.woff') format('woff'),
         url('assets/fonts/Noor-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Noor Medium */
@font-face {
    font-family: 'Noor';
    src: url('assets/fonts/Noor-Medium.woff2') format('woff2'),
         url('assets/fonts/Noor-Medium.woff') format('woff'),
         url('assets/fonts/Noor-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Noor Bold */
@font-face {
    font-family: 'Noor';
    src: url('assets/fonts/Noor-Bold.woff2') format('woff2'),
         url('assets/fonts/Noor-Bold.woff') format('woff'),
         url('assets/fonts/Noor-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================
   ELBC DESIGN SYSTEM - CENTRALIZED VARIABLES
   ==========================================
   
   This is the Single Source of Truth for all design tokens.
   All CSS files should reference these variables.
   
   Last Updated: 2026-01-22
   ========================================== */

:root {
    /* ==========================================================
       CORE COLOR PALETTE (NEW - 2026)
       ========================================================== */
    
    /* Primary Brand Colors */
    --color-primary: #000033;           /* Deep Blue - Main brand color */
    --color-primary-rgb: 0, 0, 51;      /* RGB for alpha usage */
    --color-primary-light: #000044;     /* Lighter variant */
    --color-primary-dark: #000022;      /* Darker variant */
    --color-primary-hover: #2c3e50;     /* Hover state for gradients */
    
    /* Secondary/Accent Colors */
    --color-secondary: #c9a23f;         /* Gold - Member/Premium accent */
    --color-secondary-rgb: 138, 105, 20;
    --color-secondary-light: #a07d1a;   /* Lighter gold */
    --color-secondary-dark: #6a5010;    /* Darker gold */
    --color-secondary-hover: #8b6914;   /* Hover state */
    
    /* Action/Accent Color */
    --color-accent: #8083ff;            /* Bright Blue - CTAs, links */
    --color-accent-rgb: 128, 131, 255;
    --color-accent-light: #9a9dff;
    --color-accent-dark: #6669cc;
    
    /* Alert/Error Color */
    --color-alert: #a03759;             /* Red - Errors, warnings */
    --color-alert-rgb: 160, 55, 89;
    --color-alert-light: #c04569;
    --color-alert-dark: #802848;
    
    /* ==========================================================
       SEMANTIC COLORS
       ========================================================== */
    
    /* Status Colors */
    --color-success: #28a745;
    --color-success-light: #d4edda;
    --color-success-dark: #155724;
    --color-success-border: #c3e6cb;
    
    --color-warning: #ffc107;
    --color-warning-light: #fff8e1;
    --color-warning-dark: #856404;
    --color-warning-text: #856404;
    --color-warning-border: #ffeeba;
    
    --color-danger: #a03759;
    --color-danger-light: #f8d7da;
    --color-danger-dark: #721c24;
    --color-danger-border: #f5c6cb;
    
    --color-info: #17a2b8;
    --color-info-light: #e7f3ff;
    --color-info-dark: #004085;
    --color-info-border: #b8daff;
    
    /* Social Media Colors */
    --color-whatsapp: #25d366;
    --color-whatsapp-hover: #1da851;
    --color-twitter: #1da1f2;
    --color-twitter-hover: #1a91da;
    --color-twitter-dark: #000000;      /* X/Twitter rebrand - dark version */
    --color-linkedin: #0077b5;
    --color-linkedin-hover: #006699;
    --color-facebook: #1877f2;
    --color-facebook-hover: #166fe5;
    
    /* ==========================================================
       BACKGROUND COLORS
       ========================================================== */
    
    --color-bg-light: #f7f7fa;          /* Main light background */
    --color-bg-lighter: #f8f9fa;        /* Slightly lighter */
    --color-bg-alt: #f5f5f5;            /* Alternate backgrounds */
    --color-bg-gray: #e9ecef;           /* Gray sections */
    --color-bg-dark: #000033;           /* Dark sections (same as primary) */
    --color-bg-card: #ffffff;           /* Card backgrounds */
    --color-bg-input: #ffffff;          /* Form input backgrounds */
    --color-bg-hover: #f1f3f5;          /* Hover states */
    
    /* ==========================================================
       TEXT COLORS
       ========================================================== */
    
    --color-text-main: #09090c;         /* Main body text */
    --color-text-body: #333333;         /* Body paragraph text */
    --color-text-heading: #000033;      /* Headings (same as primary) */
    --color-text-light: #ffffff;        /* Light text on dark bg */
    --color-text-muted: #6c757d;        /* Secondary/muted text */
    --color-text-subtle: #888888;       /* Very subtle text */
    --color-text-disabled: #aaaaaa;     /* Disabled/placeholder text */
    --color-text-link: #c9a23f;         /* Link color (secondary) */
    --color-text-link-hover: #6a5010;   /* Link hover */
    
    /* ==========================================================
       BORDER COLORS
       ========================================================== */
    
    --color-border: #dee2e6;            /* Default border */
    --color-border-light: #e9ecef;      /* Light border */
    --color-border-medium: #ddd;        /* Medium border */
    --color-border-dark: #ced4da;       /* Darker border */
    --color-border-focus: #c9a23f;      /* Focus state border */
    
    /* ==========================================================
       SPACING SYSTEM (8px base unit)
       ========================================================== */
    
    --spacing-xs: 4px;      /* 0.5 unit */
    --spacing-sm: 8px;      /* 1 unit */
    --spacing-md: 12px;     /* 1.5 units */
    --spacing-lg: 16px;     /* 2 units */
    --spacing-xl: 24px;     /* 3 units */
    --spacing-2xl: 32px;    /* 4 units */
    --spacing-3xl: 40px;    /* 5 units */
    --spacing-4xl: 48px;    /* 6 units */
    --spacing-5xl: 64px;    /* 8 units */
    --spacing-6xl: 80px;    /* 10 units */
    
    /* ==========================================================
       LAYOUT & CONTAINERS
       ========================================================== */
    
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-max: 1200px;
    --container-wide: 1400px;
    
    /* ==========================================================
       BORDER RADIUS
       ========================================================== */
    
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-pill: 999px;
    --radius-circle: 50%;
    
    /* ==========================================================
       TYPOGRAPHY
       ========================================================== */
    
    /* Font Families */
    --font-primary: 'Noor', 'Cairo', 'Tajawal', system-ui, sans-serif;
    --font-system: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, Consolas, monospace;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-md: 1.125rem;   /* 18px */
    --font-size-lg: 1.25rem;    /* 20px */
    --font-size-xl: 1.5rem;     /* 24px */
    --font-size-2xl: 1.875rem;  /* 30px */
    --font-size-3xl: 2.25rem;   /* 36px */
    --font-size-4xl: 3rem;      /* 48px */
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* ==========================================================
       SHADOWS
       ========================================================== */
    
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.2);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    
    /* Colored shadows for buttons */
    --shadow-primary: 0 4px 14px rgba(0, 0, 51, 0.25);
    --shadow-secondary: 0 4px 14px rgba(138, 105, 20, 0.3);
    --shadow-secondary-hover: 0 8px 20px rgba(138, 105, 20, 0.4);
    
    /* ==========================================================
       TRANSITIONS
       ========================================================== */
    
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-slower: 0.4s ease;
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    
    /* ==========================================================
       Z-INDEX SCALE
       ========================================================== */
    
    --z-negative: -1;
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 100;
    --z-fixed: 200;
    --z-overlay: 500;
    --z-modal: 1000;
    --z-popover: 1100;
    --z-tooltip: 1200;
    --z-header: 1000;                   /* Header z-index */
    
    /* ==========================================================
       COMPONENT-SPECIFIC (for compatibility)
       ========================================================== */
    
    /* Header */
    --header-height: 64px;
    --header-bg: var(--color-primary);
    --header-text: var(--color-text-light);
    --header-active: var(--color-secondary);
    
    /* Footer */
    --footer-bg: var(--color-primary);
    --footer-text: var(--color-text-light);
    
    /* ==========================================================
       LEGACY VARIABLE ALIASES (for backward compatibility)
       These map old variable names to the new system
       ========================================================== */
    
    /* Old --elbc-* variables */
    --elbc-primary: var(--color-secondary);
    --elbc-primary-rgb: var(--color-secondary-rgb);
    --elbc-primary-alt: var(--color-secondary);
    --elbc-secondary: var(--color-primary);
    --elbc-secondary-dark: var(--color-primary);
    --elbc-secondary-alt: var(--color-primary);
    --elbc-text-white: var(--color-text-light);
    --elbc-text-dark: var(--color-text-main);
    --elbc-text-gray: var(--color-text-main);
    --elbc-text-muted: var(--color-text-muted);
    --elbc-bg-light: var(--color-bg-light);
    --elbc-bg-cream: var(--color-bg-lighter);
    --elbc-bg-gray: var(--color-bg-gray);
    --elbc-bg-dark: var(--color-bg-dark);
    --elbc-bg-card: var(--color-bg-card);
    --elbc-font-arabic: var(--font-primary);
    --elbc-font-system: var(--font-system);
    --elbc-radius-sm: var(--radius-sm);
    --elbc-radius-md: var(--radius-md);
    --elbc-radius-lg: var(--radius-lg);
    --elbc-radius-xl: var(--radius-xl);
    --elbc-radius-2xl: var(--radius-2xl);
    --elbc-radius-full: var(--radius-circle);
    --elbc-radius-pill: var(--radius-pill);
    --elbc-max-width: var(--container-max);
    --elbc-header-height: var(--header-height);
    --elbc-header-bg: var(--header-bg);
    --elbc-header-text: var(--header-text);
    --elbc-header-active: var(--header-active);
    --elbc-footer-bg: var(--footer-bg);
    --elbc-footer-text: var(--footer-text);
    --elbc-footer-primary: var(--color-secondary);
    --elbc-spacing-xs: var(--spacing-xs);
    --elbc-spacing-sm: var(--spacing-sm);
    --elbc-spacing-md: var(--spacing-md);
    --elbc-spacing-lg: var(--spacing-lg);
    --elbc-spacing-xl: var(--spacing-xl);
    --elbc-spacing-2xl: var(--spacing-2xl);
    --elbc-spacing-3xl: var(--spacing-3xl);
    --elbc-shadow-sm: var(--shadow-sm);
    --elbc-shadow-md: var(--shadow-md);
    --elbc-shadow-lg: var(--shadow-lg);
    --elbc-shadow-xl: var(--shadow-xl);
    --elbc-transition-fast: var(--transition-fast);
    --elbc-transition-base: var(--transition-base);
    --elbc-transition-slow: var(--transition-slow);
    --elbc-z-base: var(--z-base);
    --elbc-z-dropdown: var(--z-dropdown);
    --elbc-z-sticky: var(--z-sticky);
    --elbc-z-overlay: var(--z-overlay);
    --elbc-z-modal: var(--z-modal);
    --elbc-z-header: var(--z-modal);
    
    /* Old --lbc-* variables (some files use this prefix) */
    --lbc-header-bg: var(--color-primary);
    --lbc-header-active: var(--color-secondary);
    --lbc-bg-light: var(--color-bg-light);
    
    /* Jobs module specific */
    --jobs-primary: var(--color-secondary);
    --jobs-secondary: var(--color-primary);
    --jobs-success: var(--color-success);
    --jobs-warning: var(--color-warning);
    --jobs-danger: var(--color-alert);
    --jobs-muted: var(--color-text-muted);
    --jobs-light: var(--color-bg-lighter);
}

/* ==========================================
   GLOBAL TYPOGRAPHY - Apply Noor Font
   ========================================== */

body,
html {
    font-family: var(--font-primary);
    direction: rtl;
}

/* Apply to all text elements */
h1, h2, h3, h4, h5, h6,
p, span, a, li, td, th,
label, input, textarea, select, button {
    font-family: var(--font-primary);
}

/* Ensure Elementor uses Noor font */
.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-button .elementor-button,
.elementor *:not([class*="fa-"]):not([class*="eicon-"]) {
    font-family: var(--font-primary);
}

/* ==========================================
   GLOBAL BACKGROUND (Overscroll Fix)
   ========================================== */

html {
   background-color: var(--color-primary);
}

body {
   background-color: var(--color-primary);
   min-height: 100vh;
}

/* Keep the main content area light */
.site,
#page,
.site-content,
.site-main,
.elementor,
.elementor-section-wrap {
   background-color: var(--color-bg-light);
}

/* Optional: globales Child-Theme CSS */