/**
 * Main Stylesheet
 * Entry point for all brand styles
 * Import order is critical
 */

/* ============================================
   BRAND FOUNDATION (REQUIRED FIRST)
   ============================================ */

/* Brand Colors - CSS Custom Properties */
@import url('./brand/colors.css');

/* Brand Typography - Fonts & Font Sizes */
@import url('./brand/fonts.css');

/* Buttons & UI Components */
@import url('./brand/buttons.css');

/* Card Styles */
@import url('./brand/cards.css');

/* Team Cards */
@import url('./brand/team_cards.css');

/* Icon Libraries */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Flag Icons */
@import url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.6.6/flag-icons.min.css');

/* Header / Navbar */
@import url('./layout/header.css');

/* Pages - Hero, Sections, etc. */
@import url('./layout/pages.css');

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

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

html {
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    font-family: var(--font-en-regular);
    font-size: var(--fs-body);
    font-weight: 400;
    color: var(--text-primary);
    background-color: var(--color-white);
}

/* ============================================
   CONTAINER
   ============================================ */

.container {
    width: 100%;
    margin: 0 auto;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
}

/* ============================================
   SECTIONS
   ============================================ */


section.light {
    background-color: var(--color-light-gray);
}

section h2 {
    color: var(--color-primary);
    margin-bottom: 2rem;
}

/* ============================================
   CONTENT WRAPPERS
   ============================================ */

main {
    min-height: calc(100vh - 120px);
}

.content {
    padding: 2rem 0;
}

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

@media (max-width: 768px) {
    :root {
        --fs-h1: 2rem;
        --fs-h2: 1.5rem;
        --fs-h3: 1.25rem;
        --fs-body: 0.95rem;
    }

    .container {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    section {
        padding: 2rem 0;
    }
}

@media (max-width: 480px) {
    :root {
        --fs-h1: 1.75rem;
        --fs-h2: 1.25rem;
        --fs-h3: 1rem;
        --fs-body: 0.9rem;
    }

    .container {
        padding: 0 0.5rem;
    }

    section {
        padding: 1.5rem 0;
    }
}

/* ============================================
   BRAND LOCK
   ============================================
   
   This stylesheet enforces:
   - Navy Blue as primary (#0B2A4A)
   - Muted Red as accent only (#8C1D18)
   - Inter for English
   - Cairo for Arabic
   - Professional, institutional look
   - Trust-based design
   
   Corporate > Creative
   Institutional > Trendy
   Trust > Aesthetics
   
   NEVER DEVIATE
============================================ */