/* ============================================================
   theme.css — shared visual system for rashedfehaid-hub
   Loaded AFTER medium-style.css on every public page.
   Source of truth for: colors, fonts, nav, footer, buttons.
   ============================================================ */

:root {
    /* Palette (matches index.html) */
    --bg: #ffffff;
    --bg-soft: #f6f7f8;
    --ink: #0f1115;
    --ink-2: #4b5261;
    --ink-3: #8a91a0;
    --line: #e6e8ec;
    --accent: #0e7c6b;
    --accent-dark: #0a5f52;
    --accent-soft: #e4f3ef;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(15,17,21,.04), 0 8px 24px -12px rgba(15,17,21,.12);
    --shadow-hover: 0 2px 4px rgba(15,17,21,.05), 0 20px 40px -16px rgba(15,17,21,.18);
    --f-head: 'Almarai', 'IBM Plex Sans Arabic', sans-serif;
    --f-body: 'IBM Plex Sans Arabic', 'Almarai', sans-serif;
    --ease: cubic-bezier(.2,.8,.2,1);

    /* Re-map medium-style.css tokens onto the new system */
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-tertiary: var(--ink-3);
    --bg-primary: var(--bg);
    --bg-secondary: var(--bg-soft);
    --accent-hover: var(--accent-dark);
    --accent-light: var(--accent-soft);
    --border-light: var(--line);
    --border-lighter: #eef0f3;
    --font-serif: var(--f-body);
    --font-sans: var(--f-head);
    --font-arabic: var(--f-body);
    --border-radius: var(--radius-sm);
    --border-radius-lg: var(--radius);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
    font-family: var(--f-body);
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink);
    background: var(--bg);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--f-head); font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
::selection { background: var(--accent-soft); color: var(--accent-dark); }
a { color: inherit; }
img { max-width: 100%; }

/* ---------- Nav (glass bar, pill links, brand mark) ---------- */
.navbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.82);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
    padding: 0;
}
.nav-container {
    max-width: 1120px; margin: 0 auto; padding: 0 1.5rem;
    height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    position: relative;
}
.nav-brand {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--f-head); font-weight: 800; font-size: 1.15rem; color: var(--ink);
    text-decoration: none; letter-spacing: 0;
}
.nav-brand::before {
    content: 'رف';
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--ink); color: #fff;
    display: grid; place-items: center;
    font-size: .85rem; font-weight: 800; line-height: 1;
}
.nav-menu { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav-menu a, .nav-link {
    display: block; padding: .45rem .8rem; border-radius: 999px;
    font-family: var(--f-body); font-size: .92rem; font-weight: 500; color: var(--ink-2);
    text-decoration: none; position: static;
    transition: background .2s, color .2s;
}
.nav-menu a:hover, .nav-link:hover { background: var(--bg-soft); color: var(--ink); }
.nav-menu a.active, .nav-link.active { color: var(--ink); background: var(--bg-soft); }
.nav-menu a.active::after, .nav-link.active::after { display: none; }
.nav-actions { display: flex; align-items: center; gap: .75rem; }
/* the inline-styled "ادعمني" pill on every page → black CTA like the homepage */
.nav-actions > a.nav-link {
    background: var(--ink) !important; color: #fff !important;
    padding: .5rem 1rem !important; border-radius: 999px !important;
    font-size: .88rem !important; font-weight: 600 !important; margin: 0 !important;
    transition: background .2s, transform .2s !important;
}
.nav-actions > a.nav-link:hover { background: var(--accent) !important; transform: translateY(-1px); }
.hamburger {
    display: none; width: 40px; height: 40px;
    border: 1px solid var(--line); border-radius: 10px; background: #fff;
    cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.hamburger span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }

@media (max-width: 768px) {
    .nav-container { padding: 0 1.25rem; }
    .nav-menu {
        display: none; position: absolute; top: 64px; right: 0; left: 0; width: auto;
        flex-direction: column; align-items: stretch; gap: .25rem;
        background: #fff; border-bottom: 1px solid var(--line);
        padding: .75rem 1.25rem 1rem; box-shadow: var(--shadow);
    }
    .nav-menu.active { display: flex; }
    .nav-menu a { padding: .7rem .9rem; font-size: 1rem; }
    .hamburger { display: flex; }
}

/* ---------- Footer (identical on every page) ---------- */
.site-footer, footer.site-footer {
    padding: 2.5rem 0 3rem; border-top: 1px solid var(--line);
    text-align: start; background: var(--bg);
}
.site-footer .footer-in {
    max-width: 1120px; margin: 0 auto; padding: 0 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-size: .88rem; color: var(--ink-3);
}
.site-footer p { margin: 0; font-size: .88rem; color: var(--ink-3); }
.site-footer .footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: 0; }
.site-footer .footer-links a { color: var(--ink-2); text-decoration: none; }
.site-footer .footer-links a:hover { color: var(--accent-dark); }

/* ---------- Shared components ---------- */
.btn-primary, .btn.btn-primary {
    background: var(--accent); color: #fff; border-color: var(--accent);
    box-shadow: 0 6px 16px -6px rgba(14,124,107,.5);
}
.btn-primary:hover, .btn.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(14,124,107,.14) !important;
}
button, input, select, textarea { font-family: inherit; }

/* Toasts positioned for RTL (pages hardcode right:20px) */
.toast { right: auto; left: 20px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Portrait (falls back to the monogram if images/portrait.jpg is missing) ---------- */
.avatar, .support-avatar, .author-avatar { position: relative; overflow: hidden; }
.avatar img, .support-avatar img, .author-avatar img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; background: #fff;
    transform: scale(1.75); transform-origin: 50% 24%;
}