/**
 * ============================================================================
 * CUSTOM FONTS - AVENIR ARABIC FONT FAMILY DEFINITIONS
 * ============================================================================
 * This stylesheet defines the custom Avenir Arabic font family used throughout
 * the entire website. It includes three font weights: Regular (400), Medium (500),
 * and Heavy (900) for different text hierarchies.
 * 
 * CRITICAL FUNCTIONALITY:
 * - Loads custom Arabic-optimized fonts for better readability
 * - Provides multiple font formats for cross-browser compatibility
 * - Defines CSS custom properties (variables) for consistent usage
 * - Applies fonts globally to all elements
 * - Uses font-display: swap for better performance
 * 
 * BROWSER COMPATIBILITY:
 * - EOT format for Internet Explorer
 * - WOFF2 format for modern browsers (best compression)
 * - WOFF format for older browsers
 * ============================================================================
 */

/* ========================================================================== */
/* FONT FACE DEFINITION - REGULAR WEIGHT (400) */
/* ========================================================================== */
/* This is the default font weight used for body text and paragraphs */
@font-face {
  font-family: "AvenirArabic";
  src: url("/font-collection/AvenirArabic-Regular.eot"); /* IE9 Compat Modes */
  src: url("/font-collection/AvenirArabic-Regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("/font-collection/AvenirArabic-Regular.woff2")
      format("woff2"),
    /* Modern Browsers */ url("/font-collection/AvenirArabic-Regular.woff")
      format("woff"); /* Older Browsers */
  font-weight: 400; /* Regular weight */
  font-style: normal;
  font-display: swap; /* Show fallback font immediately, swap when custom font loads */
}

/* ========================================================================== */
/* FONT FACE DEFINITION - MEDIUM WEIGHT (500) */
/* ========================================================================== */
/* Used for buttons, labels, and emphasized text that needs more weight */
@font-face {
  font-family: "AvenirArabic";
  src: url("/font-collection/AvenirArabic-Medium.eot"); /* IE9 Compat Modes */
  src: url("/font-collection/AvenirArabic-Medium.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("/font-collection/AvenirArabic-Medium.woff2")
      format("woff2"),
    /* Modern Browsers */ url("/font-collection/AvenirArabic-Medium.woff")
      format("woff"); /* Older Browsers */
  font-weight: 500; /* Medium weight */
  font-style: normal;
  font-display: swap; /* Performance optimization */
}

/* ========================================================================== */
/* FONT FACE DEFINITION - HEAVY WEIGHT (900) */
/* ========================================================================== */
/* Used for headings (h1, h2, h3) and strong emphasis elements */
@font-face {
  font-family: "AvenirArabic";
  src: url("/font-collection/AvenirArabic-Heavy.eot"); /* IE9 Compat Modes */
  src: url("/font-collection/AvenirArabic-Heavy.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("/font-collection/AvenirArabic-Heavy.woff2")
      format("woff2"),
    /* Modern Browsers */ url("/font-collection/AvenirArabic-Heavy.woff")
      format("woff"); /* Older Browsers */
  font-weight: 900; /* Heavy weight */
  font-style: normal;
  font-display: swap; /* Performance optimization */
}

/* ========================================================================== */
/* CSS CUSTOM PROPERTIES - FONT VARIABLES FOR CONSISTENT USAGE */
/* ========================================================================== */
/* These variables can be used throughout the entire stylesheet */
/* They provide a single source of truth for font settings */
:root {
  /* Font family stack with fallbacks for maximum compatibility */
  --app-font-family: "AvenirArabic", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  /* Font weight variables for semantic usage */
  --app-font-weight-regular: 400; /* Body text */
  --app-font-weight-medium: 500; /* Buttons, labels */
  --app-font-weight-heavy: 900; /* Headings */
}

/* ========================================================================== */
/* HTML ROOT ELEMENT - BASE FONT SETTINGS */
/* ========================================================================== */
/* Apply font to the root element with rendering optimizations */
html {
  font-family: var(--app-font-family); /* Apply custom font family */
  font-weight: var(--app-font-weight-regular); /* Default to regular weight */
  -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape on iOS */
  text-rendering: optimizeLegibility; /* Better text rendering (kerning, ligatures) */
  -webkit-font-smoothing: antialiased; /* Smooth fonts on macOS/iOS */
  -moz-osx-font-smoothing: grayscale; /* Smooth fonts on Firefox macOS */
  font-synthesis: none; /* Disable browser's synthetic bold/italic */
}

/* ========================================================================== */
/* UNIVERSAL SELECTOR - FORCE FONT ON ALL ELEMENTS */
/* ========================================================================== */
/* Ensures custom font is applied to ALL elements including pseudo-elements */
/* The !important flag overrides any conflicting font declarations */
*,
*::before,
*::after {
  font-family: var(--app-font-family) !important;
}

/* ========================================================================== */
/* REGULAR WEIGHT ELEMENTS - BODY TEXT AND STANDARD CONTENT */
/* ========================================================================== */
/* All standard text elements use regular (400) font weight */
body,
p,
span,
div,
li,
dt,
dd,
blockquote,
cite,
label,
legend,
summary,
small,
figcaption,
a,
table,
td,
th,
ul,
ol,
dl,
nav,
section,
article,
aside,
header,
footer,
main,
details {
  font-weight: var(--app-font-weight-regular);
}

/* ========================================================================== */
/* HEAVY WEIGHT ELEMENTS - HEADINGS AND STRONG EMPHASIS */
/* ========================================================================== */
/* Primary headings and strong emphasis use heavy (900) font weight */
/* This creates clear visual hierarchy and draws attention */
h1,
h2,
h3,
strong,
b,
th {
  font-weight: var(--app-font-weight-heavy);
}

/* ========================================================================== */
/* MEDIUM WEIGHT ELEMENTS - SECONDARY HEADINGS AND INTERACTIVE ELEMENTS */
/* ========================================================================== */
/* Secondary headings and buttons use medium (500) font weight */
/* Provides visual distinction without being too heavy */
h4,
h5,
h6,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn {
  font-weight: var(--app-font-weight-medium);
}

/* ========================================================================== */
/* FORM ELEMENTS - ENSURE CONSISTENT FONT IN INPUTS */
/* ========================================================================== */
/* Form elements often inherit different fonts, force our custom font */
button,
input,
select,
textarea {
  font-family: var(--app-font-family) !important;
}

/* ========================================================================== */
/* PLACEHOLDER TEXT - STYLE INPUT PLACEHOLDERS */
/* ========================================================================== */
/* Apply custom font to placeholder text in input fields */
::placeholder {
  font-family: var(--app-font-family);
}

/* ========================================================================== */
/* CODE ELEMENTS - MONOSPACE ELEMENTS USE CUSTOM FONT */
/* ========================================================================== */
/* Even code blocks use our custom font for consistency */
/* Note: You may want to use a monospace font here instead */
code,
pre,
kbd,
samp {
  font-family: var(--app-font-family) !important;
}