/*!
 * MENA Network — base.css
 * Reset, design tokens (defaults — real values are injected from DB by ThemeService), typography & utilities.
 * By MrServer, LLC | HOSSAM ALZYOD | i@hossam.net
 */

:root {
    --c-primary: #13233f;
    --c-primary-soft: #1d3358;
    --c-accent: #b8914a;
    --c-accent-dark: #9c7a39;
    --c-accent-soft: #fbf5ea;
    --c-bg: #f5f6f8;
    --c-surface: #ffffff;
    --c-text: #1b2433;
    --c-muted: #6b7385;
    --c-border: #e5e8ee;
    --c-success: #1f8a4c;
    --c-danger: #c0392b;
    --c-info: #2f6fdb;
    --c-warning: #c98a12;
    --radius: 12px;
    --radius-btn: 12px;
    --radius-sm: calc(var(--radius) * .66);
    --container: 1200px;
    --hero-overlay: .7;
    --font-main: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow: 0 2px 10px rgba(16, 24, 40, .06);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
    --header-h: 64px;
    --ease: cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-main);
    font-size: 15px;
    line-height: 1.65;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--c-accent); }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.3; font-weight: 700; color: var(--c-primary); }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; background: var(--c-bg); padding: .1em .35em; border-radius: 4px; }

hr { border: 0; border-top: 1px solid var(--c-border); margin: 1.5rem 0; }

::selection { background: var(--c-accent); color: #fff; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.skip-link { position: absolute; inset-inline-start: -999px; top: 0; z-index: 1000; background: var(--c-accent); color: #fff; padding: .5rem 1rem; }
.skip-link:focus { inset-inline-start: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- utilities ---------- */
.text-muted { color: var(--c-muted) !important; }
.text-accent { color: var(--c-accent) !important; }
.text-success { color: var(--c-success) !important; }
.text-danger { color: var(--c-danger) !important; }
.text-center { text-align: center; }
.text-end { text-align: end; }
.small { font-size: .85em; }
.nowrap { white-space: nowrap; }
.d-block { display: block; }
.d-inline { display: inline-block; }
.mx-auto { margin-inline: auto; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }
.mb-2 { margin-bottom: .5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
[hidden] { display: none !important; }

.prose { color: var(--c-text); }
.prose--page h2 { margin-top: 1.4em; }
.prose--page ul { list-style: disc; padding-inline-start: 1.4em; margin-bottom: 1em; }
.prose--page a { color: var(--c-accent); text-decoration: underline; }

.blank-page { min-height: 100vh; display: grid; place-items: center; background: var(--c-bg); }