/* ================================================================
   UAEFMA Newsroom — base.css  |  v2 Design System
   ================================================================ */

/* ----------------------------------------------------------------
   CSS Variables — v2 Palette
   ---------------------------------------------------------------- */
:root {
    /* ── Core palette ── */
    --paper:       #FFFFFF;
    --band:        #F7F7F5;
    --ink:         #1A1A1A;
    --ink-soft:    #4A4A4A;
    /* was #8A8A8A — 3.45:1 on white, 3.23:1 on sand, under AA. This token
       (and --muted, which aliases it) carries ~72 declarations of card
       dates, bylines and captions, all on light grounds. 5.02 / 4.70. */
    --ink-faint:   #6F6F6F;
    --rule:        #E2E2E2;
    --rule-2:      #EFEFEF;
    --accent:      #B11226;
    --accent-deep: #8C0D1E;
    --up:          #0A7C3E;
    --up-light:    #22C55E;
    --down:        #C0392B;
    --down-light:  #EF4444;
    --navy:        #071A2D;
    --navy-2:      #0D2540;
    --navy-deep:   #03111F;

    /* ── Backward-compat aliases (deprecated — do not add new refs) ── */
    --deep-navy:  var(--navy-deep);
    --gold:       #C9A24A;
    --off-white:  var(--band);
    --white:      var(--paper);
    --text:       var(--ink);
    --muted:      var(--ink-faint);
    --border:     var(--rule);
    --red:        var(--accent);
    --green:      var(--up);

    /* ── Font stacks ── */
    --ar-head:  'Readex Pro', 'Noto Kufi Arabic', sans-serif;
    --ar-body:  'IBM Plex Sans Arabic', 'Readex Pro', sans-serif;
    --en-serif: 'Newsreader', Georgia, serif;
    --en-sans:  'Inter', Arial, sans-serif;

    /* ── Chrome dimensions ── */
    --topbar-h: 36px;
    --header-h: 104px;
    --nav-h:    44px;
    --radius:   2px;
}

/* ----------------------------------------------------------------
   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: var(--en-sans);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
body.lang-ar {
    font-family: var(--ar-body);
    direction: rtl;
}
body.lang-en {
    font-family: var(--en-sans);
    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;
}

/* Skip-to-content link — accessibility */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: .5rem 1rem;
    background: var(--navy);
    color: #fff;
    font-size: .85rem;
    border-radius: 0 0 4px 4px;
    text-decoration: none;
    transition: top .15s;
}
.skip-to-content:focus {
    top: 0;
}

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