/* =============================================================
   THEME · executive  —  أبو محمد · Abu Mohammed
   -------------------------------------------------------------
   This file is not a design opinion. It is an implementation of a
   supplied brand manual:

       دليل الهوية البصرية الشامل — الإصدار 1.0، 2026

   Every value below traces to a section of that document, and the
   section is cited beside it. Where the engine's default would break
   a rule in the manual, the rule wins.

   ⚠ PROVENANCE. The manual's cover page is titled
   «ناصر البادي — مدرب قيادات تنفيذية | مستشار استراتيجي». It was
   handed over for THIS site, so it is implemented here. If that was
   a mis-paste, reverting is two moves: restore
   people/abu-mohammed/theme.meridian.css.bak over this file, and set
   "variant": "meridian", "fontPack": "meridian" in site.json.

   §01 فلسفة الهوية — what the rest of the file serves: confidence,
   sobriety, accomplishment. Deep executive blue for trust, charcoal
   for seriousness and neutrality, and a very restrained gold for
   accomplishment — explicitly "without turning the identity into a
   loud luxury brand". Visual quiet that carries the confidence of a
   decision, not the noise of an advertisement.
   ============================================================= */

/* =============================================================
   PART 1 · TOKENS
   ============================================================= */
:root {
  /* ---------------------------------------------------------------
     §02 نظام الألوان — the ten-colour system, verbatim.
     The engine's brand ramp is four steps of one hue; the manual
     gives two brand colours plus a gold, so the ramp is built from
     Executive Navy upward and Charcoal is held separately.
     --------------------------------------------------------------- */
  --navy-900: #0B2447;   /* Executive Navy — أزرق تنفيذي · Primary   */
  --navy-800: #0E2A52;
  --navy-700: #12305C;
  --navy-600: #173A6D;
  --charcoal: #1C1C1E;   /* Onyx Charcoal  — أسود فحمي  · Secondary  */
  --steel:    #0B2447;   /* the engine's accent base = Navy          */
  --gold:     #B08D57;   /* Strategic Gold — ذهبي استراتيجي · Accent */
  --gold-soft:#C7A97A;   /*   ↳ one step lighter, for dark grounds   */

  /* the four دلالي rows of §02 */
  --sem-success: #2E7D5B;   /* Muted Emerald  — أخضر مطفأ    */
  --sem-warning: #C08A2E;   /* Muted Amber    — كهرماني مطفأ */
  --sem-error:   #8B2E3C;   /* Muted Burgundy — عنابي مطفأ   */
  --sem-info:    #3D6B99;   /* Blue Steel     — أزرق فولاذي  */

  /* ---- surfaces, from the manual's own background and neutrals ---- */
  --bg:        #F8F7F4;   /* Ivory White   — أبيض عاجي  · Background */
  --bg-alt:    #F1F0EC;   /*   ↳ a half step, for banded sections    */
  --surface:   #FFFFFF;
  --surface-2: #F1F0EC;
  --border:    #E5E4E2;   /* Platinum Grey — رمادي فاتح · Neutral    */
  --text:      #1C1C1E;   /* §04: body copy is Charcoal              */
  --text-soft: #4A4A4C;   /*   ↳ between Charcoal and Steel Grey     */
  --muted:     #6B6B6B;   /* Steel Grey    — رمادي وسطي · secondary  */

  /* §08 الظل — "بدون ظلال زخرفية — تصميم مسطّح بالكامل".
     No decorative shadow anywhere. The tokens still have to resolve,
     so they resolve to nothing: a hairline is the only elevation this
     identity owns. */
  --shadow:    0 0 0 0 transparent;
  --shadow-lg: 0 0 0 0 transparent;

  --header-bg: var(--navy-900);
  /* §03 caps gold at 5–10% and never lets it carry a state on its
     own, so Navy — not gold — is the interactive accent. */
  --accent:    #0B2447;
  --ring:      rgba(11, 36, 71, .38);

  /* ---------------------------------------------------------------
     §08 عناصر الواجهة — geometry.
     "2px فقط — حواف شبه حادة تعكس الطابع التنفيذي، لا الودود
     الاستهلاكي" for controls; 4px for cards. Nothing rounder.
     --------------------------------------------------------------- */
  --radius:    4px;      /* cards    */
  --radius-sm: 2px;      /* controls */
  --maxw:      1180px;
  --nav-h:     66px;

  /* ---------------------------------------------------------------
     §04 الطباعة والخطوط
       headings  Noto Kufi Arabic — "يُستخدم للعناوين الرئيسية
                 والفرعية فقط" (headings only)
       body      IBM Plex Sans Arabic, weights 300–500
       Latin     IBM Plex Sans, named as the direct counterpart
     --------------------------------------------------------------- */
  --ff-ar: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --ff-en: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --ff-display-ar: "Noto Kufi Arabic", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --ff-display-en: "Noto Kufi Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --ff-num: "IBM Plex Sans", "IBM Plex Sans Arabic", monospace;

  --eyebrow-tracking: .14em;
  --eyebrow-case: uppercase;
  --h-tracking: 0;

  /* ---------------------------------------------------------------
     §10 قواعد الاستخدام — "يُمنع استخدام تدرجات لونية (Gradients)".
     Every brand gradient the engine ships therefore resolves flat.
     --------------------------------------------------------------- */
  --brand-grad: var(--navy-900);
  --cta-grad:   var(--navy-900);
  --footer-bg:  var(--navy-900);
  --on-brand:   #F8F7F4;   /* Ivory, not pure white — §02 has no pure white */

  --cta-fg:      #F8F7F4;
  --cta-fg-soft: rgba(248, 247, 244, .82);
  --cta-fg-line: rgba(248, 247, 244, .42);

  /* §02 defines a success colour; the engine's status dot shipped a
     brighter green than this palette allows. */
  --status-dot: var(--sem-success);

  /* The engine's file-type badges and sync states carry their own
     hues. All of them are tokenised, so they are brought inside the
     palette here rather than left as ten colours nobody approved
     (§10: "يُمنع استخدام ألوان خارج لوحة الهوية المعتمدة"). */
  --ext-pdf:     var(--sem-error);
  --ext-doc:     var(--sem-info);
  --ext-sheet:   var(--sem-success);
  --ext-slide:   var(--sem-warning);
  --ext-archive: var(--muted);
  --ext-image:   var(--sem-info);
  --ext-video:   var(--navy-600);
  --cms-warn:    var(--sem-warning);
  --cms-live:    var(--sem-success);
}

/* -------------------------------------------------------------
   Dark mode. The manual does not describe one — it is a print and
   presentation guide. So this is the manual's own logic extended:
   §05 permits the wordmark in ivory on a Navy OR Charcoal ground, so
   Charcoal becomes the night surface, Navy stays the brand slab, and
   gold steps to --gold-soft to hold contrast against it.
   ------------------------------------------------------------- */
html[data-theme="dark"] {
  --bg:        #141416;
  --bg-alt:    #1C1C1E;
  --surface:   #1C1C1E;
  --surface-2: #232326;
  --border:    #333336;
  --text:      #F8F7F4;
  --text-soft: #D2D1CD;
  --muted:     #9A9A9A;
  --header-bg: #0B2447;
  /* Navy on Charcoal is unreadable. This is Navy lifted in value, not
     a new hue introduced into the palette. */
  --accent:    #7E9CC4;
  --ring:      rgba(126, 156, 196, .42);
  --gold:      #C7A97A;
  --brand-grad: #0B2447;
  --cta-grad:   #0B2447;
  --footer-bg:  #0B2447;
  --shadow:    0 0 0 0 transparent;
  --shadow-lg: 0 0 0 0 transparent;
}

/* =============================================================
   PART 2 · TYPE
   §04 السلّم الطباعي, as specified. The engine sets fluid clamp()
   sizes; the manual gives fixed ones, so the clamp is kept for small
   screens and lands exactly on the manual's figure at full size.
   ============================================================= */

/* Noto Kufi Arabic ships 500 / 700 / 900. The engine asks for 800 in
   several places, which a browser would fake, and §10 forbids mixing
   weight styles inside one heading. Pinned. */
html[data-variant="executive"] h1,
html[data-variant="executive"] h2,
html[data-variant="executive"] h3,
html[data-variant="executive"] h4,
html[data-variant="executive"] .section-head h2,
html[data-variant="executive"] .stat .num,
html[data-variant="executive"] .brand .btxt { font-weight: 700; }

/* H1 — 44px, Noto Kufi Bold, Navy */
html[data-variant="executive"] .hero h1 {
  font-size: clamp(2rem, 5vw, 44px);
  line-height: 1.2;
  color: var(--navy-900);
}

/* H2 — 32px, Noto Kufi Bold, Navy */
html[data-variant="executive"] .section-head h2 {
  font-size: clamp(1.5rem, 3.4vw, 32px);
  color: var(--navy-900);
}

/* H3 — 20px, Noto Kufi SemiBold, Navy */
html[data-variant="executive"] .tl-head > h3,
html[data-variant="executive"] .comm-card h3,
html[data-variant="executive"] .jr-t,
html[data-variant="executive"] .prop-t,
html[data-variant="executive"] .pub h3 {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy-900);
}

/* Navy is the heading colour on ivory. On the night surface, and on
   the Navy hero slab, the heading takes the foreground instead. */
html[data-variant="executive"][data-theme="dark"] .hero h1,
html[data-variant="executive"][data-theme="dark"] .section-head h2,
html[data-variant="executive"][data-theme="dark"] .tl-head > h3,
html[data-variant="executive"][data-theme="dark"] .comm-card h3,
html[data-variant="executive"][data-theme="dark"] .jr-t,
html[data-variant="executive"][data-theme="dark"] .prop-t,
html[data-variant="executive"][data-theme="dark"] .pub h3 { color: var(--text); }

/* body — 16px, IBM Plex Sans Arabic Regular, Charcoal */
html[data-variant="executive"] body { font-size: 16px; line-height: 1.75; }
html[data-variant="executive"] .hero .lead,
html[data-variant="executive"] .about-summary,
html[data-variant="executive"] .tl-intro,
html[data-variant="executive"] .prop-p,
html[data-variant="executive"] .jr-body,
html[data-variant="executive"] .comm-card p { font-size: 16px; font-weight: 400; }

/* secondary / label — 13px, IBM Plex Sans Arabic Light, Steel Grey */
html[data-variant="executive"] .section-head .eyebrow,
html[data-variant="executive"] .fact .fx small,
html[data-variant="executive"] .contact-card small,
html[data-variant="executive"] .stat .lbl,
html[data-variant="executive"] .brand .btxt small {
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
}

/* =============================================================
   PART 3 · SURFACES, CONTROLS, DETAIL
   ============================================================= */

/* ---- §08 الأزرار --------------------------------------------------
   Primary: Navy ground, ivory text; ON HOVER the ground goes
   transparent and the text goes Navy. That is a specified behaviour,
   and it is the opposite of the engine's default, which lifts the
   button and deepens a shadow.
   ------------------------------------------------------------------ */
html[data-variant="executive"] .btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
  box-shadow: none;
}
html[data-variant="executive"] .btn-primary {
  background: var(--navy-900);
  color: var(--on-brand);
  border: 1px solid var(--navy-900);
  box-shadow: none;
}
html[data-variant="executive"] .btn-primary:hover {
  background: transparent;
  color: var(--navy-900);
  transform: none;
  box-shadow: none;
}
html[data-variant="executive"][data-theme="dark"] .btn-primary:hover {
  color: var(--text);
  border-color: var(--text);
}

/* Secondary: no fill, thin border, text in the border's own colour. */
html[data-variant="executive"] .btn-ghost {
  background: transparent;
  border-color: var(--navy-900);
  color: var(--navy-900);
}
html[data-variant="executive"] .btn-ghost:hover {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
  transform: none;
}
html[data-variant="executive"][data-theme="dark"] .btn-ghost {
  border-color: var(--text-soft);
  color: var(--text);
}

/* ---- §08 البطاقات: white or ivory, a thin Platinum Grey hairline,
   4px corners, no shadow. ----------------------------------------- */
html[data-variant="executive"] .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}
html[data-variant="executive"] .card:hover {
  transform: none;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--navy-900) 30%, var(--border));
}
/* The previous look ran an accent bar across a card on hover — a
   decorative flourish this identity does not have. */
html[data-variant="executive"] .card::before { display: none; }

/* ---- §06 الأيقونات: outline, 1.4–1.6px stroke, no fill, Navy by
   default, gold only at extreme need. The engine's icon tiles are
   FILLED brand-coloured squares, which is precisely the filled icon
   the manual forbids — so the tile loses its fill and becomes a thin
   frame, and the glyph carries the colour. ------------------------- */
html[data-variant="executive"] .card-title .ci,
html[data-variant="executive"] .comm-card .ci,
html[data-variant="executive"] .contact-card .ci,
html[data-variant="executive"] .fact .fi,
html[data-variant="executive"] .chip .ci,
html[data-variant="executive"] .float-chip .fi,
html[data-variant="executive"] .pub .pn,
html[data-variant="executive"] .prop-n,
html[data-variant="executive"] .jr-n {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--navy-900);
}
html[data-variant="executive"] svg { stroke-width: 1.5; }
html[data-variant="executive"][data-theme="dark"] .card-title .ci,
html[data-variant="executive"][data-theme="dark"] .comm-card .ci,
html[data-variant="executive"][data-theme="dark"] .contact-card .ci,
html[data-variant="executive"][data-theme="dark"] .fact .fi,
html[data-variant="executive"][data-theme="dark"] .pub .pn,
html[data-variant="executive"][data-theme="dark"] .prop-n,
html[data-variant="executive"][data-theme="dark"] .jr-n { color: var(--text); }

/* ---- §10: no gradients, anywhere -------------------------------- */
html[data-variant="executive"] .section-head .rule { background: var(--gold); }
html[data-variant="executive"] .bar > i { background: var(--navy-900); }
html[data-variant="executive"][data-theme="dark"] .bar > i { background: var(--accent); }
html[data-variant="executive"] .cta-band::before { display: none; }
html[data-variant="executive"] .hero::before { background: none; }

/* ---- §03 القاعدة الذهبية -----------------------------------------
   "لا يُستخدم اللون الذهبي كخلفية كبيرة أبداً" — gold is never a large
   ground. Permitted: heading text, a thin frame, an icon, or a rule
   under a main heading; capped at 5–10% of the design. Everywhere the
   previous look used it as a fill it becomes a line or a text colour.
   ------------------------------------------------------------------ */
html[data-variant="executive"] .tl-period {
  background: transparent;
  border: 1px solid var(--border);
  border-inline-start: 2px solid var(--navy-900);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-weight: 500;
}
html[data-variant="executive"] .tl-period.current {
  border-inline-start-color: var(--gold);
  color: var(--navy-900);
  background: transparent;
}
html[data-variant="executive"][data-theme="dark"] .tl-period.current { color: var(--text); }
/* §06 الأيقونات is an outline vocabulary — "يُمنع: الأيقونات المملوءة
   بالكامل". A filled dot is a filled shape, so the marker is a ring:
   Navy for a past role, gold for the current one. */
html[data-variant="executive"] .tl-dot { background: transparent; border-color: var(--navy-900); }
html[data-variant="executive"] .tl-dot.current { background: transparent; border-color: var(--gold); }
html[data-variant="executive"][data-theme="dark"] .tl-dot { border-color: var(--accent); }
html[data-variant="executive"] .tl-org { color: var(--navy-900); font-weight: 500; }
html[data-variant="executive"][data-theme="dark"] .tl-org { color: var(--accent); }
html[data-variant="executive"] .tl-points li::before { background: var(--gold); }
html[data-variant="executive"] .tl-note {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-inline-start: 2px solid var(--gold);
  border-radius: var(--radius-sm);
}

/* Every remaining rounded corner comes down to the manual's 2px. */
html[data-variant="executive"] .chip,
html[data-variant="executive"] .dl-card,
html[data-variant="executive"] .blog-card,
html[data-variant="executive"] .gal-item,
html[data-variant="executive"] .dl-btn,
html[data-variant="executive"] .icon-btn,
html[data-variant="executive"] .to-top,
html[data-variant="executive"] .hero-badge,
html[data-variant="executive"] .hero-orcid,
html[data-variant="executive"] .cert-btn,
html[data-variant="executive"] .pub-link,
html[data-variant="executive"] .blog-ext,
html[data-variant="executive"] .doc-card,
html[data-variant="executive"] .dl-ext { border-radius: var(--radius-sm); }
html[data-variant="executive"] .dl-btn { box-shadow: none; }
html[data-variant="executive"] .chip:hover,
html[data-variant="executive"] .icon-btn:hover,
html[data-variant="executive"] .cert-btn:hover,
html[data-variant="executive"] .dl-btn:hover { transform: none; }

/* The hero's role line is the one place gold reads as "accomplishment"
   at heading size — §03 lists heading text as a permitted use. */
html[data-variant="executive"] .hero .role {
  color: var(--gold);
  font-family: var(--ff-display);
  font-weight: 500;
}

html[data-variant="executive"] .stat .num { color: var(--navy-900); }
html[data-variant="executive"] .stat .num .suffix { color: var(--gold); }
html[data-variant="executive"][data-theme="dark"] .stat .num { color: var(--text); }

html[data-variant="executive"] .comm-card .org,
html[data-variant="executive"] .pub .tag { color: var(--navy-900); }
html[data-variant="executive"][data-theme="dark"] .comm-card .org,
html[data-variant="executive"][data-theme="dark"] .pub .tag { color: var(--accent); }

/* §10: "الحفاظ على مساحات بيضاء كافية حول جميع العناصر" */
html[data-variant="executive"] .section { padding-block: 72px; }

/* The card's own title becomes a Steel Grey label rather than a
   heading, so §04's rule that the display face is for headings only
   is not quietly broken by every card on the site. */
html[data-variant="executive"] .card-title {
  font-family: var(--ff);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-case);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

/* §05 + §09: the footer is a Navy slab carrying the ivory wordmark,
   with a thin gold rule as the repeating visual signature the manual
   asks for across all printed material. */
html[data-variant="executive"] .footer { border-top: 1px solid var(--gold); }
html[data-variant="executive"] .footer-links a:hover { color: var(--gold-soft); }


/* =============================================================
   PART 4 · THE NAVY HEADER
   -------------------------------------------------------------
   §09 التطبيقات, for the website: "خلفية Ivory أساسية، أقسام Navy
   للتباين، لمسات Gold محدودة جداً للعناصر التفاعلية" — an ivory
   ground, Navy sections for contrast, very limited gold on
   interactive elements. The header and the hero are those Navy
   sections; everything below them is ivory.

   The engine's header is a translucent tint of the page background,
   so everything that sits on it has to be restated for a dark
   ground — and every value here is either Ivory or an alpha of it,
   never a new colour (§10: no colours outside the palette).
   ============================================================= */
html[data-variant="executive"] .nav {
  background: var(--header-bg);
  backdrop-filter: none;
  border-bottom: 1px solid rgba(248, 247, 244, .14);
}
html[data-variant="executive"] .nav.scrolled { box-shadow: none; }

/* §05: the wordmark, ivory on Navy — the manual's second permitted
   placement. There is no symbolic mark, so the engine's initials tile
   is switched off; the thin gold rule under the name is the fixed
   distinguishing element the manual specifies in its place. */
html[data-variant="executive"] .nav .brand .mono { display: none; }
html[data-variant="executive"] .nav .brand .btxt {
  color: var(--on-brand);
  font-family: var(--ff-display);
  padding-block-end: 7px;
  border-block-end: 1px solid var(--gold);
}
html[data-variant="executive"] .nav .brand .btxt small {
  color: rgba(248, 247, 244, .62);
  font-family: var(--ff);
}

html[data-variant="executive"] .nav-links a,
html[data-variant="executive"] .nav-group-btn { color: rgba(248, 247, 244, .74); }
html[data-variant="executive"] .nav-links a:hover,
html[data-variant="executive"] .nav-group-btn:hover {
  color: var(--on-brand);
  background: rgba(248, 247, 244, .07);
}
html[data-variant="executive"] .nav-links a.active { color: var(--on-brand); }
/* §03: gold as a thin rule is permitted, and the active tab also turns
   ivory, so the state never rests on the gold alone. */
html[data-variant="executive"] .nav-links a.active::after { background: var(--gold); }

html[data-variant="executive"] .nav .icon-btn {
  color: rgba(248, 247, 244, .8);
  border-color: rgba(248, 247, 244, .26);
  background: transparent;
}
html[data-variant="executive"] .nav .icon-btn:hover {
  color: var(--on-brand);
  border-color: var(--gold);
  background: transparent;
}

/* The dropdown is a card, so it returns to the ivory system. */
html[data-variant="executive"] .nav-group-menu {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}
html[data-variant="executive"] .nav-group .nav-group-menu a { color: var(--text-soft); }
html[data-variant="executive"] .nav-group .nav-group-menu a:hover { color: var(--navy-900); background: var(--surface-2); }
html[data-variant="executive"] .nav-group .nav-group-menu a.active { color: var(--navy-900); background: var(--surface-2); }

/* The mobile drawer is a card too. */
html[data-variant="executive"] .drawer { border-radius: 0; }
html[data-variant="executive"] .drawer a { border-radius: var(--radius-sm); }

/* --- The hero is the other Navy section --------------------------- */
html[data-variant="executive"] .hero .lead,
html[data-variant="executive"] .hero-position { color: rgba(248, 247, 244, .8); }
html[data-variant="executive"] .portrait-inner { background: rgba(248, 247, 244, .07); }
html[data-variant="executive"] .portrait-inner .placeholder { color: rgba(248, 247, 244, .45); }