/* ==========================================================
WEB ACADEMY — BLOG · shared stylesheet (same canvas design system)
RTL · mobile-first
========================================================== */
/* ------------------------------------------------------------------
FONTS
The @font-face block that used to sit here was a verbatim copy of
assets/fonts.css — ~3 KB of duplicate declarations and two places to
change one URL. The declarations now live only in fonts.css, which the
page links directly (see wa_page_head in api/blog.php).
A rather than an @import on purpose: @import serialises the
request behind blog.css, which is exactly the wrong thing to do to the
stylesheet that carries the above-the-fold typeface.
------------------------------------------------------------------ */
:root{
--paper:#fbfcfe; --paper-2:#f3f6fb; --ink:#0e1c36; --ink-2:#12294f;
--soft:#47597b; --faint:#8093ae; --line:#e3eaf5; --line-2:#cdd9ec;
--steel:#2c64ad; --steel-deep:#1d426f; --sky:#dceafb; --sky-2:#eaf2fc;
--brass:#c09547; --brass-soft:#f2e3c3; --green:#4e9168;
--card-sh:0 12px 34px -20px rgba(14,28,54,.25);
--card-sh-lg:0 30px 70px -34px rgba(14,28,54,.35);
--r:14px; --max:1200px; --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:96px;}
html,body{max-width:100%;}
body{font-family:'Tajawal',sans-serif; background:var(--paper); color:var(--ink);
line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:clip;}
img,svg{display:block; max-width:100%; height:auto;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
h1,h2,h3,h4{font-weight:800; color:var(--ink); letter-spacing:-.01em; text-wrap:balance;}
.en{font-family:'Poppins','Tajawal',sans-serif; direction:ltr; unicode-bidi:isolate;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px; min-width:0;}
::selection{background:var(--steel); color:#fff;}
:focus-visible{outline:2.5px solid var(--steel); outline-offset:3px; border-radius:6px;}
.canvas{position:relative;}
.canvas::before{content:""; position:absolute; inset:0; pointer-events:none;
background-image:radial-gradient(circle,#d5dff0 1.15px,transparent 1.15px); background-size:24px 24px;
-webkit-mask-image:radial-gradient(85% 80% at 50% 40%,#000 30%,transparent 100%);
mask-image:radial-gradient(85% 80% at 50% 40%,#000 30%,transparent 100%);}
.canvas > *{position:relative;}
.q{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--steel-deep);
background:var(--sky-2); border:1px solid var(--sky); padding:7px 16px; border-radius:100px; margin-bottom:16px;}
.q::before{content:"؟"; display:inline-flex; width:20px; height:20px; border-radius:50%; background:var(--steel);
color:#fff; font-size:12px; align-items:center; justify-content:center; font-weight:800;}
.script{font-family:'Aref Ruqaa',serif; font-weight:700; color:var(--steel); position:relative;
display:inline-block; padding:0 .12em; line-height:1.25;}
.script::before{content:""; position:absolute; inset:8% -2% 4%; z-index:-1; background:var(--sky);
border-radius:6px; transform:rotate(-1.6deg);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px;
border-radius:13px; font-weight:800; font-size:15.5px; border:1.5px solid transparent;
transition:transform .2s var(--ease), box-shadow .2s, background .2s, border-color .2s; white-space:nowrap;}
.btn-primary{background:linear-gradient(180deg,#1d3a66,var(--ink-2)); color:#fff;
box-shadow:0 14px 30px -14px rgba(18,41,79,.65), inset 0 1px 0 rgba(255,255,255,.16);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-primary img{width:22px; height:22px;}
.btn-ghost{background:#fff; color:var(--ink-2); border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--steel); background:var(--sky-2); transform:translateY(-2px);}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--card-sh);}
.chip{display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line);
border-radius:100px; padding:8px 14px; font-size:12.5px; font-weight:700; color:var(--soft);
box-shadow:var(--card-sh); white-space:nowrap;}
.chip b{color:var(--ink-2);}
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.rv.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important;} .rv{opacity:1; transform:none;}}
/* nav */
header{position:fixed; top:12px; inset-inline:0; z-index:300; display:flex; justify-content:center; padding:0 12px; pointer-events:none;}
.nav{pointer-events:all; width:100%; max-width:1120px;
background:rgba(255,255,255,.72); backdrop-filter:blur(18px) saturate(170%); -webkit-backdrop-filter:blur(18px) saturate(170%);
border:1px solid rgba(220,230,246,.95); border-radius:16px; box-shadow:0 14px 40px -20px rgba(14,28,54,.28);
padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:14px; transition:background .3s;}
header.scrolled .nav{background:rgba(255,255,255,.95);}
.nav-logo img{height:34px; width:auto;}
.nav-links{display:none; gap:20px; align-items:center;}
.nav-links a{font-size:14px; font-weight:700; color:var(--soft); position:relative; padding:4px 0;}
.nav-links a.on, .nav-links a:hover{color:var(--ink-2);}
.nav-links a::after{content:""; position:absolute; bottom:-2px; inset-inline:0; height:2.5px; border-radius:2px;
background:var(--steel); transform:scaleX(0); transition:transform .2s var(--ease);}
.nav-links a.on::after, .nav-links a:hover::after{transform:scaleX(1);}
.nav-cta .btn{padding:11px 20px; font-size:13.5px;}
@media(min-width:800px){ .nav-links{display:flex;} }
@media(max-width:799px){ .nav-cta .btn{padding:10px 16px; font-size:12.5px;} .nav-logo img{height:29px;} }
/* blog hero */
.b-hero{padding:130px 0 30px; text-align:center;}
.b-hero h1{font-size:clamp(32px,7.5vw,58px); line-height:1.3; font-weight:900;}
.b-hero p{font-size:clamp(14.5px,2vw,17px); color:var(--soft); max-width:620px; margin:16px auto 0; font-weight:500;}
@media(min-width:900px){ .b-hero{padding:160px 0 44px;} }
/* posts grid */
.posts{padding:34px 0 80px;}
.p-grid{display:grid; grid-template-columns:1fr; gap:20px;}
@media(min-width:680px){ .p-grid{grid-template-columns:1fr 1fr;} }
@media(min-width:1020px){ .p-grid{grid-template-columns:repeat(3,1fr); gap:24px;} }
.p-card{display:flex; flex-direction:column; overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s;}
.p-card:hover{transform:translateY(-6px); box-shadow:var(--card-sh-lg);}
.p-band{height:118px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.p-band::before{content:""; position:absolute; inset:0;
background-image:radial-gradient(circle,rgba(255,255,255,.22) 1.1px,transparent 1.1px); background-size:20px 20px;}
.p-band svg{width:42px; height:42px; color:#fff; position:relative; filter:drop-shadow(0 6px 14px rgba(5,12,28,.35));}
.p-band .num{position:absolute; bottom:-14px; inset-inline-start:14px; font-family:'Aref Ruqaa',serif;
font-size:54px; color:rgba(255,255,255,.28); line-height:1;}
.band-steel{background:linear-gradient(150deg,#2c64ad,#1d426f);}
.band-ink{background:linear-gradient(150deg,#28497e,#0e1c36);}
.band-brass{background:linear-gradient(150deg,#c09547,#8a6526);}
.band-green{background:linear-gradient(150deg,#4e9168,#2f5f43);}
.p-cont{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1;}
.p-tag{font-size:11px; font-weight:800; color:var(--steel-deep); background:var(--sky-2); border:1px solid var(--sky);
border-radius:100px; padding:4px 12px; width:fit-content; margin-bottom:11px;}
.p-cont h3{font-size:16.5px; line-height:1.55; margin-bottom:8px;}
.p-cont p{font-size:13px; color:var(--soft); font-weight:500; line-height:1.7; flex:1;}
.p-meta{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px;
padding-top:13px; border-top:1px solid var(--line); font-size:11.5px; color:var(--faint); font-weight:700;}
.p-meta .go{color:var(--steel); font-weight:800; font-size:12.5px;}
/* article */
.post-hero{padding:126px 0 10px; text-align:center;}
.post-hero .crumb{font-size:12.5px; font-weight:700; color:var(--faint); margin-bottom:14px; display:flex; gap:7px; justify-content:center; flex-wrap:wrap;}
.post-hero .crumb a{color:var(--steel);}
.post-hero h1{font-size:clamp(26px,5.6vw,44px); line-height:1.45; max-width:860px; margin:6px auto 18px;}
.post-hero .pmeta{display:flex; gap:8px 18px; justify-content:center; flex-wrap:wrap; font-size:12.5px; color:var(--faint); font-weight:700;}
.post-hero .pmeta b{color:var(--steel-deep);}
@media(min-width:900px){ .post-hero{padding:158px 0 16px;} }
/* ==========================================================================
ARTICLE BODY
THE RULE THIS SECTION EXISTS TO ENFORCE:
A container that holds prose is NEVER display:flex or display:grid.
Flex and grid promote every child — including every bare text node — to
an independent layout item. `
Label: sentence
` in a
`grid-template-columns:20px 1fr` container therefore became three items:
the ✓ marker, the , and the sentence. The took the 1fr track and
the sentence was pushed to the next row into the 20px track, where it
wrapped one word per line. Every list item rendered ~299px tall instead
of ~30px, on 64 of the 71 list items on the blog, and the identical bug
in .callout hit 19 of 20 callouts.
Nothing looked wrong in the CSS, which is why it survived review: the
rule is only wrong in the presence of an inline child, and every author
writes `