/* ================================================================
   UAEFMA Newsroom — site.css  |  Phase 1 Foundation
   ================================================================ */

/* ----------------------------------------------------------------
   CSS Variables
   ---------------------------------------------------------------- */
:root {
    --navy:       #071A2D;
    --deep-navy:  #03111F;
    --gold:       #C9A24A;
    --off-white:  #F6F4EF;
    --white:      #FFFFFF;
    --text:       #111827;
    --muted:      #6B7280;
    --border:     #E5E7EB;
    --red:        #B21E2B;
    --green:      #1E7F3B;
    --topbar-h:   36px;
    --header-h:   80px;
    --nav-h:      44px;
    --radius:     3px;
}

/* ----------------------------------------------------------------
   Reset
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    font-size: 15px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
    font-family: 'Inter', 'Noto Kufi Arabic', Arial, sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
body.lang-ar {
    font-family: 'Noto Kufi Arabic', 'Inter', Arial, sans-serif;
    direction: rtl;
}
body.lang-en {
    direction: ltr;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ════════════════════════════════════════════════════════
   PHASE 22E — RTL / Arabic Polish
   ════════════════════════════════════════════════════════ */

/* Arabic body: increase line-height for readability */
body.lang-ar {
    line-height: 1.75;
    word-spacing: .04em;
}

/* Arabic article body font size bump */
body.lang-ar .np-art-body {
    font-size: 1.08rem;
    line-height: 1.9;
}

/* Ensure logical props work in RTL (inline-start = right, inline-end = left) */
body.lang-ar .np-art-kicker::before {
    margin-inline-end: .5em;
    margin-inline-start: 0;
}

/* Fix drop-cap float direction in Arabic */
body.lang-ar .np-art-body > p:first-child::first-letter {
    float: none;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Hero: ensure RTL text alignment */
body.lang-ar .hero-content,
body.lang-ar .hero-title,
body.lang-ar .hero-excerpt,
body.lang-ar .hero-meta { text-align: right; }

/* Nav / header RTL */
body.lang-ar .nav-list { flex-direction: row-reverse; }
body.lang-ar .hero-side { text-align: right; }

/* Cards: ensure RTL text wraps correctly */
body.lang-ar .np-rel-title,
body.lang-ar .np-sidebar-item-title,
body.lang-ar .fv-featured-title,
body.lang-ar .fv-stack-title,
body.lang-ar .pod-title { text-align: right; }

/* Category pill in cards: direction fix */
body.lang-ar .eg-cat { direction: rtl; }

/* Article header in Arabic */
body.lang-ar .np-art-header { text-align: right; }
body.lang-ar .np-art-byline { justify-content: flex-end; }

/* Editorial grid sections: RTL */
body.lang-ar .eg-section-hd,
body.lang-ar .media-section-hd,
body.lang-ar .fv-hd {
    flex-direction: row-reverse;
}

/* Most-read numbers: RTL side */
body.lang-ar .mr-item { flex-direction: row-reverse; }
body.lang-ar .mr-body { text-align: right; }

/* Newsletter */
body.lang-ar .hp-newsletter-inner { direction: rtl; }
body.lang-ar .hp-newsletter-sub,
body.lang-ar .hp-newsletter-title { text-align: right; }
body.lang-ar .hp-newsletter-perks { justify-content: flex-start; direction: rtl; }

/* Footer in RTL */
body.lang-ar .site-footer { text-align: right; }
body.lang-ar .footer-col ul { text-align: right; }

/* Breaking bar RTL */
body.lang-ar .bb-track { animation-direction: reverse; }

/* ════════════════════════════════════════════════════════════════
   PHASE 23 — GLOBAL TYPOGRAPHY + DENSITY
   ════════════════════════════════════════════════════════════════ */

/* Slightly tighter base line-height */
body { line-height: 1.55 !important; }

/* Headings: tighter globally */
h1, h2, h3, h4 {
    line-height: 1.18;
    letter-spacing: -.015em;
}

/* Container: consistent max-width */
.container {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}