/* ═══════════════════════════════════════════════════════════════
   Vala — light blog (2026-10-12)
   Owner request: the blog (/blog and /blog/:slug) is light — warm off-white,
   never glaring — with posts shown as soft rounded banner cards. Every other
   page stays dark. Everything here is scoped under body.blog-light, which only
   the two blog views set, so no other page changes.
   Spec: docs/BLOG_PLAN.md §3. No borders, Cairo, no negative tracking.
   Overrides of the global header/footer use `html body.blog-light …` so they
   outrank the `body:not(.dashboard) …` rules in vala-glass / polish / fixes.
   ═══════════════════════════════════════════════════════════════ */

body.blog-light{
  --b-bg: #F5F4F1;
  --b-bg-deep: #EDEBE6;
  --b-card: #FFFFFF;
  --b-ink: #1C1A24;
  --b-text: #3B3846;
  --b-muted: #7A7685;          /* icons, decoration, large text */
  --b-meta: #67636F;           /* small text: AA (≥4.5) on bg and on cards */
  --b-accent: #7C3AED;
  --b-accent-ink: #6D28D9;
  --b-soft: #EEEAF8;
  --b-r-card: 24px;
  --b-r-img: 18px;
  --b-r-pill: 999px;
  --b-shadow: 0 1px 2px rgba(28,26,36,.04), 0 12px 32px rgba(28,26,36,.06);
  --b-shadow-hover: 0 2px 4px rgba(28,26,36,.05), 0 22px 48px rgba(28,26,36,.10);
  --b-ease: cubic-bezier(.22,1,.36,1);
  --b-ring: 0 0 0 3px #fff, 0 0 0 5px var(--b-accent);
  /* legacy dark-theme variables, re-pointed so any global rule that still
     reaches these pages (e.g. `p { color: var(--text-secondary) }`) reads well */
  --bg-primary: #F5F4F1;
  --bg-secondary: #EDEBE6;
  --bg-card: #FFFFFF;
  --text-primary: #1C1A24;
  --text-secondary: #3B3846;
  --text-muted: #67636F;
  --border: rgba(28,26,36,.08);
  --gl-text: #1C1A24;
  --gl-mut: #67636F;
  --px-text: #1C1A24;
  color: var(--b-text);
}
body.blog-light .bl p{ color: inherit; }

/* ── Canvas: flat warm off-white, no glow, no grid ───────────── */
html body.blog-light,
html body.blog-light:not(.dashboard):not(.page-home){
  background: var(--b-bg) !important;
  color: var(--b-text);
}
html body.blog-light::before,
html body.blog-light::after,
html body.blog-light:not(.dashboard):not(.page-home)::before,
html body.blog-light:not(.dashboard):not(.page-home)::after{
  background: none !important;
  background-image: none !important;
  -webkit-mask: none !important; mask: none !important;
  content: none !important;
}
body.blog-light ::selection{ background: rgba(124,58,237,.18); color: var(--b-ink); }

/* ── Site header on the light page ───────────────────────────── */
html body.blog-light .header,
html body.blog-light .header.scrolled,
html body.blog-light .header.px-scrolled{
  background: rgba(245,244,241,.86) !important;
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(28,26,36,.05) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
html body.blog-light .header .brand-logo{ filter: brightness(0); opacity: .86; }
html body.blog-light .header .logo:hover .brand-logo{ opacity: 1; }
html body.blog-light .nav a{ color: #4A4656 !important; }
html body.blog-light .nav a:hover,
html body.blog-light .nav a.active{ color: var(--b-ink) !important; background: transparent !important; border-color: transparent !important; }
html body.blog-light .nav a.active::after{ background: var(--b-accent) !important; }
html body.blog-light .ha-ghost{ color: var(--b-ink); background: rgba(28,26,36,.06); }
html body.blog-light .ha-ghost:hover{ background: rgba(28,26,36,.1); }
html body.blog-light .ha-primary{ background: var(--b-accent); box-shadow: 0 10px 24px -14px rgba(124,58,237,.9); }
html body.blog-light .ha-primary:hover{ background: var(--b-accent-ink); }
html body.blog-light .ha-icon{ color: #4A4656; background: rgba(28,26,36,.06); }
html body.blog-light .ha-icon:hover{ color: var(--b-ink); background: rgba(28,26,36,.1); }
html body.blog-light .hamburger span{ background: var(--b-ink) !important; }
html body.blog-light .hamburger:hover{ background: rgba(28,26,36,.06); }
html body.blog-light .nav form.nav-client button{ color: #4A4656; }

@media (max-width: 768px){
  html body.blog-light .header,
  html body.blog-light .header.scrolled,
  html body.blog-light .header.px-scrolled{
    background: rgba(245,244,241,.97) !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* opened phone menu: a white card */
  html body.blog-light .nav{
    background: var(--b-card) !important;
    border: 0 !important;
    box-shadow: 0 24px 60px -20px rgba(28,26,36,.28) !important;
  }
  html body.blog-light .nav a{ color: var(--b-text) !important; }
  html body.blog-light .nav a:hover,
  html body.blog-light .nav a.active{ color: var(--b-ink) !important; background: var(--b-soft) !important; }

  /* phone action bar */
  html body.blog-light .m-cta{
    background: rgba(255,255,255,.97) !important;
    border-top: 0 !important;
    box-shadow: 0 -10px 30px -14px rgba(28,26,36,.22) !important;
  }
  html body.blog-light .m-cta-primary{ background: var(--b-accent) !important; color: #fff !important; }
  html body.blog-light .m-cta-secondary{ background: var(--b-soft) !important; color: var(--b-accent-ink) !important; border: 0 !important; }
}

/* ── Site footer on the light page ───────────────────────────── */
html body.blog-light .footer,
html body.blog-light .footer.ft{
  background: var(--b-bg-deep) !important;
  border-top: 0 !important;
  border-radius: 32px 32px 0 0;
  margin-top: clamp(56px, 9vh, 96px) !important;
}
html body.blog-light .ft-logo img{ filter: brightness(0); opacity: .8; }
html body.blog-light .ft-nav a{ color: #4E4A59; }
html body.blog-light .ft-nav a:hover{ color: var(--b-ink); }
html body.blog-light .ft-nav a[href="/blog"]{ color: var(--b-accent-ink); }
html body.blog-light .ft-social a{ background: rgba(28,26,36,.06); color: #4E4A59; }
html body.blog-light .ft-social a:hover{ background: rgba(28,26,36,.1); color: var(--b-ink); }
html body.blog-light .ft-social .ft-wa:hover{ background: rgba(22,163,74,.12); color: #15803D; }
html body.blog-light .ft-copy{ color: var(--b-meta); }

/* ── Focus: one visible violet ring everywhere on the page ───── */
body.blog-light a:focus-visible,
body.blog-light button:focus-visible{
  outline: none;
  box-shadow: var(--b-ring) !important;
}

/* ═══════════════════════ Blog layout ═══════════════════════
   Swarlet-style (owner, 2026-10-16): kicker + big title, one wide featured
   card, two-column grid, cards = 16:9 cover inside a soft white card, then
   date · reading time, title, two lines, tag pills. Article: head aligned to
   the start, reading column + sticky «في هذه الصفحة». No borders. */
body.blog-light .bl{
  padding-top: calc(var(--nav-height, 72px) + clamp(28px, 6vh, 64px));
}
body.blog-light .bl-wrap{
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

/* index head */
body.blog-light .bl-head{
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  margin-bottom: clamp(28px, 5vh, 48px);
}
body.blog-light .bl-kicker{
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; color: var(--b-accent);
}
body.blog-light .bl-head h1{
  margin: 0; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 900; line-height: 1.3; letter-spacing: 0;
  color: var(--b-ink);
}
body.blog-light .bl-head p{ margin: 0; max-width: 44em; font-size: 1.05rem; line-height: 1.9; color: var(--b-meta); }

/* cards */
body.blog-light .bl-grid{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px);
}
body.blog-light .bl-card{
  display: flex; flex-direction: column;
  padding: 14px; border-radius: var(--b-r-card);
  background: var(--b-card); box-shadow: var(--b-shadow);
  color: inherit; text-decoration: none;
  transition: transform .45s var(--b-ease), box-shadow .45s var(--b-ease);
}
body.blog-light .bl-card:hover{ transform: translateY(-3px); box-shadow: var(--b-shadow-hover); }
body.blog-light .bl-media{
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--b-r-img);
  background: linear-gradient(135deg, #E9E3F7, #DCE3F5);
}
body.blog-light .bl-media img{
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--b-ease);
}
body.blog-light .bl-card:hover .bl-media img{ transform: scale(1.03); }
body.blog-light .bl-body{ display: flex; flex-direction: column; gap: 8px; padding: 16px 6px 6px; flex: 1; }
body.blog-light .bl-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: .84rem; font-weight: 600; color: var(--b-meta);
}
body.blog-light .bl-title{
  margin: 0; font-size: 1.22rem; font-weight: 800; line-height: 1.6; letter-spacing: 0; color: var(--b-ink);
}
body.blog-light .bl-card:hover .bl-title{ color: var(--b-accent-ink); }
body.blog-light .bl-excerpt{
  margin: 0; font-size: .96rem; line-height: 1.85; color: var(--b-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.blog-light .bl-tags{
  display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none;
}
body.blog-light .bl-tags li{
  padding: 3px 12px; border-radius: var(--b-r-pill);
  background: var(--b-bg); color: var(--b-meta); font-size: .78rem; font-weight: 700;
}

/* featured: one wide card, cover on top */
body.blog-light .bl-feature{ margin-bottom: clamp(18px, 2.4vw, 28px); padding: 18px; }
body.blog-light .bl-feature .bl-body{ padding: 20px 8px 8px; gap: 10px; }
body.blog-light .bl-feature .bl-title{ font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.5; }
body.blog-light .bl-feature .bl-excerpt{ font-size: 1.05rem; max-width: 46em; }
body.blog-light .bl-read{ margin-top: 6px; font-weight: 800; color: var(--b-accent-ink); display: inline-flex; gap: 8px; }
body.blog-light .bl-read span{ transition: transform .4s var(--b-ease); }
body.blog-light .bl-card:hover .bl-read span{ transform: translateX(-4px); }

/* pagination */
body.blog-light .bl-pages{ display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
body.blog-light .bl-pages a{
  min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--b-r-pill); background: var(--b-card); color: var(--b-text);
  font-weight: 700; text-decoration: none; box-shadow: 0 1px 2px rgba(28,26,36,.05);
}
body.blog-light .bl-pages a[aria-current="page"]{ background: var(--b-accent); color: #fff; }

/* empty + buttons */
body.blog-light .bl-empty{
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: clamp(40px, 8vh, 80px) 20px; border-radius: var(--b-r-card); background: var(--b-card); box-shadow: var(--b-shadow);
}
body.blog-light .bl-empty :is(h1, h2){ margin: 0; font-size: 1.4rem; font-weight: 800; color: var(--b-ink); }
body.blog-light .bl-empty p{ margin: 0; color: var(--b-meta); }
body.blog-light .bl-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px; border-radius: var(--b-r-pill);
  background: var(--b-ink); color: #fff; font-weight: 800; text-decoration: none;
  transition: background .3s ease, transform .3s var(--b-ease);
}
body.blog-light .bl-btn:hover{ background: var(--b-accent-ink); color: #fff; transform: translateY(-2px); }

/* ── Article ─────────────────────────────────────────────── */
body.blog-light .bl-article{ display: block; }
body.blog-light .bl-article.has-toc{
  display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: clamp(32px, 5vw, 72px); align-items: start;
}
body.blog-light .bl-main{ min-width: 0; max-width: 760px; }
body.blog-light .bl-article:not(.has-toc) .bl-main{ margin-inline: auto; }
body.blog-light .bl-article-head{ display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
body.blog-light .bl-crumbs ol{
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none;
  font-size: .86rem; font-weight: 600; color: var(--b-meta);
}
body.blog-light .bl-crumbs li{ display: inline-flex; align-items: center; gap: 8px; }
body.blog-light .bl-crumbs li + li::before{ content: '/'; color: #B3AFBC; }
body.blog-light .bl-crumbs a{ color: var(--b-meta); text-decoration: none; }
body.blog-light .bl-crumbs a:hover{ color: var(--b-accent-ink); }
body.blog-light .bl-article-head .bl-tags{ margin: 0; }
body.blog-light .bl-article-head .bl-tags li{ background: var(--b-soft); color: var(--b-accent-ink); }
body.blog-light .bl-article-head h1{
  margin: 0; font-size: clamp(1.9rem, 4.4vw, 2.9rem); font-weight: 900; line-height: 1.45; letter-spacing: 0;
  color: var(--b-ink); text-wrap: balance;
}
body.blog-light .bl-lead{ margin: 0; font-size: 1.12rem; line-height: 1.9; color: var(--b-text); }
body.blog-light .bl-article-head .bl-meta{ font-size: .9rem; }

body.blog-light .bl-cover{ margin: clamp(24px, 4vh, 36px) 0 0; }
body.blog-light .bl-cover img{
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--b-r-card); background: var(--b-soft);
}

/* reading column */
body.blog-light .bl-prose{
  margin-top: clamp(28px, 5vh, 44px);
  font-size: 18px; line-height: 2; color: var(--b-text); overflow-wrap: break-word;
}
body.blog-light .bl-prose > :first-child{ margin-top: 0; }
body.blog-light .bl-prose p{ margin: 0 0 1.25em; }
body.blog-light .bl-prose h2{
  margin: 2em 0 .6em; scroll-margin-top: calc(var(--nav-height, 72px) + 20px);
  font-size: clamp(1.4rem, 2.6vw, 1.7rem); font-weight: 900; line-height: 1.55; letter-spacing: 0; color: var(--b-ink);
}
body.blog-light .bl-prose h3{ margin: 1.6em 0 .5em; font-size: 1.2rem; font-weight: 800; line-height: 1.6; color: var(--b-ink); }
body.blog-light .bl-prose strong{ color: var(--b-ink); font-weight: 800; }
body.blog-light .bl-prose a{
  color: var(--b-accent-ink); font-weight: 700;
  text-decoration: underline; text-decoration-color: rgba(124,58,237,.35); text-underline-offset: 4px;
}
body.blog-light .bl-prose ul,
body.blog-light .bl-prose ol{ margin: 0 0 1.4em; padding-inline-start: 1.4em; }
body.blog-light .bl-prose li{ margin: 0 0 .5em; }
body.blog-light .bl-prose li::marker{ color: var(--b-accent); font-weight: 800; }
/* a quote = the line to remember (Swarlet's pulled lines) */
body.blog-light .bl-prose blockquote{
  margin: 1.8em 0; padding: 4px 22px; border: 0;
  border-inline-start: 4px solid var(--b-accent);
  color: var(--b-ink); font-size: 1.12em; font-weight: 800; line-height: 1.8;
}
body.blog-light .bl-prose blockquote p:last-child{ margin-bottom: 0; }
body.blog-light .bl-prose hr{ height: 4px; margin: 2.4em auto; border: 0; width: 56px; border-radius: 999px; background: var(--b-soft); }
body.blog-light .bl-prose code{ padding: 2px 8px; border-radius: 8px; background: var(--b-soft); color: var(--b-ink); font-size: .88em; }
body.blog-light .bl-prose img{ display: block; width: 100%; height: auto; margin: 2em 0 0; border-radius: var(--b-r-img); }
body.blog-light .bl-prose figure{ margin: 2em 0; }
body.blog-light .bl-prose figure img{ margin: 0; }
body.blog-light .bl-prose figcaption{ margin-top: 10px; font-size: .82rem; text-align: center; color: var(--b-meta); }

/* tables */
body.blog-light .bl-prose .table-wrap{
  margin: 1.8em 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: 18px; background: var(--b-card); box-shadow: var(--b-shadow);
}
body.blog-light .bl-prose table{ width: 100%; border-collapse: collapse; font-size: .92em; line-height: 1.75; }
body.blog-light .bl-prose th,
body.blog-light .bl-prose td{ padding: 13px 16px; vertical-align: top; border: 0; text-align: start; min-width: 120px; }
body.blog-light .bl-prose thead th{ background: var(--b-soft); color: var(--b-ink); font-weight: 800; }
body.blog-light .bl-prose tbody tr:nth-child(even) td{ background: #F9F8F6; }

/* «في هذه الصفحة» */
body.blog-light .bl-toc{
  position: sticky; top: calc(var(--nav-height, 72px) + 24px);
  padding: 4px 0; font-size: .9rem;
}
body.blog-light .bl-toc p{ margin: 0 0 10px; font-weight: 800; color: var(--b-ink); }
body.blog-light .bl-toc ol{ margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
body.blog-light .bl-toc a{
  display: block; padding: 6px 12px; border-radius: 10px;
  color: var(--b-meta); text-decoration: none; line-height: 1.6;
  border-inline-start: 2px solid transparent;
}
body.blog-light .bl-toc a:hover{ color: var(--b-ink); }
body.blog-light .bl-toc a[aria-current="true"]{ color: var(--b-accent-ink); font-weight: 700; background: var(--b-soft); }

/* end CTA */
body.blog-light .bl-cta{
  margin: clamp(40px, 7vh, 64px) 0 0; padding: clamp(26px, 4vw, 40px);
  border-radius: var(--b-r-card); color: #fff;
  background: linear-gradient(120deg, #0040ac 0%, #4f46e5 55%, #7c3aed 100%);
}
body.blog-light .bl-cta h2{ margin: 0 0 8px; font-size: clamp(1.3rem, 2.6vw, 1.6rem); font-weight: 900; color: #fff; }
body.blog-light .bl-cta p{ margin: 0 0 20px; line-height: 1.85; color: rgba(255,255,255,.86); }
body.blog-light .bl-cta .bl-btn{ background: #fff; color: var(--b-ink); }
body.blog-light .bl-cta .bl-btn:hover{ background: #F1EDFB; color: var(--b-ink); }
body.blog-light .bl-cta-alt{ display: block; width: max-content; max-width: 100%; margin-top: 14px; color: rgba(255,255,255,.86); font-weight: 700; font-size: .95rem; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255,255,255,.4); }
body.blog-light .bl-cta-alt:hover{ color: #fff; text-decoration-color: #fff; }
body.blog-light .bl-back{ display: inline-block; margin-top: 22px; color: var(--b-meta); font-weight: 700; text-decoration: none; }
body.blog-light .bl-back:hover{ color: var(--b-accent-ink); }

/* related */
body.blog-light .bl-related{ margin-top: clamp(56px, 9vh, 88px); }
body.blog-light .bl-related h2{ margin: 0 0 20px; font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 900; color: var(--b-ink); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px){
  body.blog-light .bl-article.has-toc{ display: block; }
  body.blog-light .bl-toc{ display: none; }
  body.blog-light .bl-main{ margin-inline: auto; }
}
@media (max-width: 680px){
  body.blog-light .bl-grid{ grid-template-columns: 1fr; }
  body.blog-light .bl-card,
  body.blog-light .bl-feature{ padding: 10px; }
  body.blog-light .bl-prose{ font-size: 17px; }
  html body.blog-light .footer,
  html body.blog-light .footer.ft{ border-radius: 26px 26px 0 0; }
}
@media (prefers-reduced-motion: reduce){
  body.blog-light .bl-card,
  body.blog-light .bl-media img,
  body.blog-light .bl-btn,
  body.blog-light .bl-read span{ transition: none !important; }
  body.blog-light .bl-card:hover,
  body.blog-light .bl-btn:hover,
  body.blog-light .bl-card:hover .bl-media img{ transform: none; }
}