/* === Sukar Font (Arabic) === */
@font-face {
    font-family: 'Sukar';
    src: url('/fonts/SukarRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* === TimeBurner Font (English) === */
@font-face {
    font-family: 'TimeBurner';
    src: url('/fonts/Timeburner-xJB8.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Define language-specific font variables */
:root {
    --arabic-font: 'Sukar', sans-serif;
    --english-font: 'TimeBurner', sans-serif;
}

/* Apply fonts globally based on language direction */
body.rtl {
    font-family: var(--arabic-font);
    --default-font: var(--arabic-font);
    --heading-font: var(--arabic-font);
    --nav-font: var(--arabic-font);
}

body.ltr {
    font-family: var(--english-font);
    --default-font: var(--english-font);
    --heading-font: var(--english-font);
    --nav-font: var(--english-font);
}

/* Apply fonts to all text elements */
body.rtl *,
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6,
body.rtl p,
body.rtl span,
body.rtl div,
body.rtl a,
body.rtl button,
body.rtl input,
body.rtl select,
body.rtl textarea,
body.rtl label {
    font-family: var(--arabic-font) !important;
}

body.ltr *,
body.ltr h1,
body.ltr h2,
body.ltr h3,
body.ltr h4,
body.ltr h5,
body.ltr h6,
body.ltr p,
body.ltr span,
body.ltr div,
body.ltr a,
body.ltr button,
body.ltr input,
body.ltr select,
body.ltr textarea,
body.ltr label {
    font-family: var(--english-font) !important;
}

/* Arabic text styling improvements - INCREASED SIZES */
body.rtl {
    font-size: 1.3em;
    /* Increased from 1.1em */
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

/* Specific size adjustments for Arabic headings - INCREASED SIZES */
body.rtl h1 {
    font-size: 2.2rem;
}

/* Increased from 2.5rem */
body.rtl h2 {
    font-size: 2.5rem;
}

/* Increased from 2.2rem */
body.rtl h3 {
    font-size: 2.2rem;
}

/* Increased from 1.9rem */
body.rtl h4 {
    font-size: 1.9rem;
}

/* Increased from 1.6rem */
body.rtl h5 {
    font-size: 1.6rem;
}

/* Increased from 1.3rem */
body.rtl h6 {
    font-size: 1.3rem;
}

/* Increased from 1.1rem */

/* Section title specific styling - INCREASED SIZE */
body.rtl .section-title p {
    font-size: 1.5rem;
    /* Increased from 2.4rem */
    font-weight: 200;
}

/* Form elements specific styling - INCREASED SIZE */
body.rtl button,
body.rtl input,
body.rtl select,
body.rtl textarea {
    font-size: 1.3rem;
    /* Increased from 1.1rem */
}

/* English text styling - INCREASED SIZE */
body.ltr {
    font-size: 1.2rem;
    /* Increased from 1rem */
    font-weight: 400;
    letter-spacing: 0.2px;
    line-height: 1.5;
}

/* English heading sizes - NEW ADDITION */
body.ltr h1 {
    font-size: 2.8rem;
}

body.ltr h2 {
    font-size: 1.8rem;
}

body.ltr h3 {
    font-size: 1.5rem;
}

body.ltr h4 {
    font-size: 1.3rem;
}

body.ltr h5 {
    font-size: 1.1rem;
}

body.ltr h6 {
    font-size: 1rem;
}

/* Form elements for English - NEW ADDITION */
body.ltr button,
body.ltr input,
body.ltr select,
body.ltr textarea {
    font-size: 1.1rem;
}

/* Small text elements - NEW ADDITION */
.small,
small,
.text-muted {
    font-size: 90% !important;
}

/* Responsive adjustments - NEW ADDITION */
@media (max-width: 768px) {
    body.rtl {
        font-size: 1.2em;
    }

    body.ltr {
        font-size: 1.1rem;
    }

    body.rtl h1 {
        font-size: 2.5rem;
    }

    body.rtl h2 {
        font-size: 2.2rem;
    }

    body.rtl h3 {
        font-size: 1.9rem;
    }
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
    --background-color: #ffffff;
    /* Background color for the entire website, including individual sections */
    --default-color: #4C4C4C;
    /* Default color used for the majority of the text content across the entire website */
    --heading-color: #241C24;
    /* Color for headings, subheadings and title throughout the website */
    --accent-color: #AC8C64;
    /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #dbba97;
    /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ffffff;
    /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
    --nav-color: #AC8C64;
    /* The default color of the main navmenu links */
    --nav-hover-color: #AC8C64;
    /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff;
    /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff;
    /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #737373;
    /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #AC8C64;
    /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the same color scheme. */

.light-background {
    --background-color: #E6E6E6;
    --surface-color: #ffffff;
    --default-color: #4C4C4C;
    --heading-color: #241C24;
}

.dark-background {
    --background-color: #241C24;
    /* خلفية داكنة */
    --surface-color: #4C4C4C;
    /* كروت أو عناصر داخل الخلفية */
    --default-color: #D4C4B4;
    /* نص بلون فاتح دافئ */
    --heading-color: #D4BCA4;
    /* عناوين بلون مميز */
    --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
    scroll-behavior: smooth;
}