/* ==========================================================================
   ابني صرحك — CMS presentation layer
   Font presets, density/format controls, notification bell, inline-edit UI.
   Loaded after core.css + blocks.css on every public page.
   ========================================================================== */

/* --- IBM Plex Sans Arabic (font switcher option) ------------------------- */
@font-face { font-family: "Plex"; src: url("../fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family: "Plex"; src: url("../fonts/plex-arabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family: "Plex"; src: url("../fonts/plex-arabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family: "Plex"; src: url("../fonts/plex-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-024F,U+2000-22FF; }
@font-face { font-family: "Plex"; src: url("../fonts/plex-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-024F,U+2000-22FF; }
@font-face { font-family: "Plex"; src: url("../fonts/plex-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-024F,U+2000-22FF; }

/* --- Font presets ------------------------------------------------------- */
/* headings drop to the sans */
:root[data-font="thmanyah-sans"] { --font-display: "Thmanyah", system-ui, sans-serif; }
:root[data-font="thmanyah-sans"] :is(h1,h2,h3,h4) { letter-spacing: -0.01em; }
/* whole site on IBM Plex Sans Arabic */
:root[data-font="plex"] {
  --font-display: "Plex", system-ui, sans-serif;
  --font-ui: "Plex", system-ui, sans-serif;
  --font-body: "Plex", system-ui, sans-serif;
}
:root[data-font="plex"] :is(h1,h2,h3,h4) { letter-spacing: -0.01em; }

/* --- Density / format --------------------------------------------------- */
:root[data-density="compact"] {
  --band: clamp(48px, 6vw, 80px);
  --band-tight: clamp(36px, 4.5vw, 60px);
  --band-open: clamp(64px, 8vw, 110px);
}
:root[data-density="spacious"] {
  --band: clamp(104px, 12vw, 164px);
  --band-tight: clamp(76px, 9vw, 116px);
  --band-open: clamp(128px, 16vw, 216px);
}

/* documents off: keep the beige panels on the navy palette instead */
.cms-no-paper .on-paper {
  --bg: var(--nv-850); --surface: var(--nv-800); --well: var(--nv-850);
  --line: var(--nv-600); --ink: var(--pa-200); --ink-quiet: var(--nv-300);
  --accent: var(--gd-500); --focus: var(--gd-400);
}
.cms-no-paper .doc { box-shadow: none; border: 1px solid var(--nv-600); --doc-punch: var(--nv-900); }

/* --- Notification bell -------------------------------------------------- */
.cms-bell-wrap { position: relative; }
.cms-bell {
  display: grid; place-items: center;
  inline-size: 40px; block-size: 40px;
  border: 1px solid var(--nv-600); border-radius: var(--r-md);
  color: var(--pa-200);
  transition: border-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);
}
.cms-bell:hover { border-color: var(--gd-500); color: var(--gd-400); }
.cms-bell svg { inline-size: 19px; block-size: 19px; }
.cms-bell-count {
  position: absolute; inset-block-start: -5px; inset-inline-end: -5px;
  min-inline-size: 17px; block-size: 17px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--stop); color: #fff;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.62rem; line-height: 1;
  border-radius: 999px; border: 2px solid var(--nv-950);
}
.cms-notes {
  position: absolute; inset-block-start: calc(100% + 10px); inset-inline-end: 0;
  inline-size: min(340px, 84vw); max-block-size: 60vh; overflow-y: auto;
  background: var(--nv-850); border: 1px solid var(--nv-600); border-radius: var(--r-md);
  box-shadow: 0 22px 50px -24px oklch(0 0 0 / 0.85);
  padding: 0.5rem; z-index: var(--z-overlay); display: grid; gap: 0.3rem;
}
.cms-note { display: flex; gap: 0.6rem; padding: 0.7rem; border-radius: var(--r-sm); }
.cms-note.is-unread { background: color-mix(in oklch, var(--gd-500) 10%, transparent); }
.cms-note-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; margin-block-start: 0.4rem; flex: 0 0 auto; }
.cms-note-dot.pill-ok { color: var(--ok); } .cms-note-dot.pill-warn { color: var(--warn); } .cms-note-dot.pill-stop { color: var(--stop); }
.cms-note strong { font-family: var(--font-ui); font-weight: 700; font-size: var(--t-sm); color: var(--pa-200); display: block; }
.cms-note p { font-size: var(--t-xs); color: var(--nv-300); margin-block-start: 0.15rem; }
.cms-note-empty { padding: 1rem; text-align: center; color: var(--nv-300); font-size: var(--t-sm); }

/* --- Inline edit mode --------------------------------------------------- */
.cms-editing [data-edit] { outline: 1px dashed color-mix(in oklch, var(--gd-500) 55%, transparent); outline-offset: 2px; cursor: text; border-radius: 2px; }
.cms-editing [data-edit]:hover { outline-style: solid; background: color-mix(in oklch, var(--gd-500) 12%, transparent); }
.cms-editing [data-edit-img] { outline: 2px dashed color-mix(in oklch, var(--gd-500) 60%, transparent); outline-offset: 3px; cursor: pointer; }
.cms-editbar {
  position: fixed; inset-block-end: 16px; inset-inline: 0; margin-inline: auto;
  inline-size: max-content; max-inline-size: 92vw;
  display: flex; gap: 0.6rem; align-items: center;
  background: var(--nv-950); border: 1px solid var(--gd-600); border-radius: 999px;
  padding: 0.5rem 0.7rem 0.5rem 1rem; z-index: var(--z-toast);
  box-shadow: 0 20px 50px -22px oklch(0 0 0 / 0.9);
  font-family: var(--font-ui);
}
.cms-editbar span { font-size: var(--t-sm); color: var(--nv-200); }
.cms-editbar .cms-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--gd-500); animation: cms-pulse 1.6s ease-in-out infinite; }
@keyframes cms-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .cms-editbar .cms-dot { animation: none; } }