/* Article typography for technopark.ps
   ------------------------------------------------------------------
   Applies ONLY to #all_body.tp-article. The template adds that class
   when a page does not ship styling of its own, so the handful of pages
   that do (the Diaspora Network, Foreign Direct Investment and the rest)
   are left exactly as they are.

   The problem this solves: custom_new.css carries
       #all_body * { font-size: 22px !important }
   so every element on every article renders at one size with no
   hierarchy, and the text runs the full width of the viewport —
   around 200 characters a line, justified. Each rule below therefore
   has to out-specify (1,0,0)+!important, which "#all_body.tp-article x"
   does at (1,1,0).
*/

#all_body.tp-article{
  /* ~75 characters a line: the range people actually read comfortably,
     instead of the full 1,400px the container allows. */
  max-width:820px;
  font-size:18px!important;
  line-height:1.8!important;
  color:#243041!important;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif!important;
}

/* start/end rather than left/right so the Arabic pages flip correctly */
#all_body.tp-article p,
#all_body.tp-article li,
#all_body.tp-article td,
#all_body.tp-article th{
  font-size:18px!important;
  line-height:1.8!important;
  text-align:start!important;   /* was justify: it tears rivers through the column */
  color:#243041!important;
}
#all_body.tp-article p{margin:0 0 1.15em!important}
#all_body.tp-article p:last-child{margin-bottom:0!important}

#all_body.tp-article h1,
#all_body.tp-article h2,
#all_body.tp-article h3,
#all_body.tp-article h4{
  font-weight:700!important;
  line-height:1.25!important;
  color:#0f2744!important;
  margin:1.9em 0 .55em!important;
  text-wrap:balance;
}
#all_body.tp-article h1{font-size:30px!important}
#all_body.tp-article h2{font-size:25px!important}
#all_body.tp-article h3{font-size:21px!important}
#all_body.tp-article h4{font-size:19px!important}
#all_body.tp-article :is(h1,h2,h3,h4):first-child{margin-top:0!important}

/* The blanket rule is "#all_body *", so it still catches every inline element
   not named above: a <span> inside an 18px paragraph was rendering at 22px,
   and a <span> inside a 21px heading at 22px, which defeats the scale. Inline
   elements inherit from whatever they sit in. */
#all_body.tp-article :is(span,font,strong,b,em,i,u,small,sub,sup,label,a){
  font-size:inherit!important;
  line-height:inherit!important;
}

/* Headings carry their own alignment and colour, including over anything a
   Google Docs paste left inline — one article had a #40E0D0 turquoise heading
   at roughly 1.8:1 against white. */
#all_body.tp-article :is(h1,h2,h3,h4){text-align:start!important}
#all_body.tp-article :is(h1,h2,h3,h4) :is(span,font,b,strong,a){color:inherit!important}

#all_body.tp-article strong,#all_body.tp-article b{font-weight:700!important;color:#0f2744!important}

#all_body.tp-article a{
  color:#1F4E79!important;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
#all_body.tp-article a:hover{color:#15395c!important;text-decoration-thickness:2px}

#all_body.tp-article ul,#all_body.tp-article ol{
  margin:0 0 1.15em!important;
  padding-inline-start:1.4em!important;
}
#all_body.tp-article li{margin:0 0 .45em!important}

#all_body.tp-article img{
  max-width:100%!important;
  height:auto!important;
  border-radius:12px;
  display:block;
  margin-block:1.6em;
}

#all_body.tp-article blockquote{
  margin:1.6em 0!important;
  padding:2px 0 2px 18px!important;
  border-inline-start:3px solid #1F4E79;
  color:#3d4a5c!important;
  font-style:normal;
}

#all_body.tp-article table{
  width:100%!important;
  border-collapse:collapse;
  margin:1.6em 0!important;
  display:block;
  overflow-x:auto;          /* a wide table scrolls instead of breaking the column */
}
#all_body.tp-article :is(td,th){border:1px solid #e2e8f0;padding:10px 12px!important}
#all_body.tp-article th{background:#f1f6fa;font-weight:700!important}

#all_body.tp-article hr{border:0;border-top:1px solid #e2e8f0;margin:2.2em 0}

@media (max-width:640px){
  #all_body.tp-article{font-size:17px!important}
  #all_body.tp-article p,#all_body.tp-article li{font-size:17px!important}
  #all_body.tp-article h1{font-size:25px!important}
  #all_body.tp-article h2{font-size:22px!important}
  #all_body.tp-article h3{font-size:19px!important}
}