/* Unified Font System for Yemen Youth Union Website */
/* IMPORTANT: All rules exclude Font Awesome icon elements to prevent icon breakage */

/* Import Google Fonts - Exact weights as requested */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@700&family=Tajawal:wght@600&family=IBM+Plex+Sans+Arabic:wght@400&family=Noto+Sans+Arabic:wght@400&display=swap');

/* Font Awesome Protection - Ensure icon fonts ALWAYS work */
.fa,
.fas,
.far,
.fal,
.fad,
.fab,
.fa-solid,
.fa-regular,
.fa-light,
.fa-duotone,
.fa-brands,
[class*="fa-"]::before,
[class*="fa-"]::after {
    font-family: inherit !important;
}

.fas,
.fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.far,
.fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

.fab,
.fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

.fal,
.fa-light {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 300 !important;
}

.fad,
.fa-duotone {
    font-family: "Font Awesome 6 Duotone" !important;
    font-weight: 900 !important;
}

/* Font Variables */
:root {
    --font-heading: 'Cairo', sans-serif;
    /* Main headings - Bold (700) */
    --font-subheading: 'Tajawal', sans-serif;
    /* Side headings/sections - SemiBold (600) */
    --font-body: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
    /* News/Article text - Regular (400) */
    --font-fallback: Arial, sans-serif;
}

/* Arabic Pages - Default body font */
[dir="rtl"] {
    font-family: var(--font-body) !important;
}

[dir="ltr"] {
    font-family: 'Inter', Arial, sans-serif;
}

/* ============================================
   MAIN HEADINGS (h1, h2) - Cairo Bold
   ============================================ */
h1,
h2,
.heading-main,
.text-heading-main,
.card-title,
.section-heading,
.hero-title {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
    /* Cairo Bold */
}

/* ============================================
   SUBHEADINGS (h3, h4, h5, h6) - Tajawal SemiBold
   ============================================ */
h3,
h4,
h5,
h6,
.heading-sub,
.text-heading-sub,
.section-title,
.card-subtitle,
.section-subheading,
.event-title,
.news-title {
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 600 !important;
    /* Tajawal SemiBold */
}

/* ============================================
   BODY TEXT - News/Articles - IBM Plex Arabic / Noto Sans Arabic Regular
   Excludes Font Awesome icon elements (i, span with fa classes)
   ============================================ */
p,
span:not([class*="fa"]):not(.fas):not(.far):not(.fab):not(.fal):not(.fad),
div:not([class*="fa"]),
li,
td,
th,
.text-body,
.article-content,
.news-content,
.event-description,
.news-description,
article p,
article div:not([class*="fa"]),
.article-body,
.news-body,
.event-body {
    font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif !important;
    font-weight: 400 !important;
    /* Regular */
}

/* Navigation Menu - Cairo */
nav,
.navbar,
.menu,
.nav-link,
.nav-item,
.navbar a:not([class*="fa"]),
.navbar span:not([class*="fa"]):not(.fas):not(.far):not(.fab),
.navbar .nav-link {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 500 !important;
}

/* Buttons - Cairo (exclude icon elements inside buttons) */
button:not([class*="fa"]):not(.fas):not(.far):not(.fab),
.btn:not([class*="fa"]),
a.button:not([class*="fa"]),
button[type="submit"],
a.btn:not([class*="fa"]) {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 600 !important;
}

/* Form Labels - Tajawal */
label,
.form-label {
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 500 !important;
}

/* Form Inputs - IBM Plex / Noto Sans */
input,
textarea,
select {
    font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif !important;
    font-weight: 400 !important;
}

/* Card Bodies - IBM Plex / Noto Sans */
.card-body,
.section-content,
.card p,
.card div:not([class*="fa"]) {
    font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif !important;
    font-weight: 400 !important;
}

/* Event Cards - Specific targeting */
.event-card h3,
.event-card .event-title {
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 600 !important;
}

.event-card p,
.event-card .event-description {
    font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif !important;
    font-weight: 400 !important;
}

/* News Cards - Specific targeting */
.news-card h3,
.news-card .news-title {
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 600 !important;
}

.news-card p,
.news-card .news-description,
.news-card article {
    font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif !important;
    font-weight: 400 !important;
}

/* Footer - Specific targeting */
footer h3,
footer h4 {
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 600 !important;
}

footer p,
footer li,
footer span:not([class*="fa"]):not(.fas):not(.far):not(.fab),
footer a:not([class*="fa"]),
footer ul {
    font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif !important;
    font-weight: 400 !important;
}

footer .heading-main {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
}

footer .heading-sub {
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 600 !important;
}

footer .text-body {
    font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif !important;
    font-weight: 400 !important;
}