/* StorkPlus blog post styling.
 *
 * Scoped to .single-post .entry-content so it dresses the semantic Gutenberg
 * markup the posts already use — headings, paragraphs, lists, links, tables —
 * instead of each post carrying its own inline CSS. One cacheable file styles
 * every post written so far and every one written after it.
 *
 * Tokens mirror uploads/storkplus/site.css so the blog reads as the same brand.
 */

.single-post .entry-content {
  --sp-blog-ink: #05060f;
  --sp-blog-body: #2f3352;
  --sp-blog-muted: #6b7091;
  --sp-blog-brand: #2235dd;
  --sp-blog-soft: #f0f1fd;
  --sp-blog-line: #e4e7fd;

  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  color: var(--sp-blog-body);
}

/* site.css centres the article with `body.sp-themed.single .entry-content
   { margin-inline: auto }`, but its own earlier rule
   `.entry-content { margin-left: 0 !important; margin-right: 0 !important }`
   — written to strip padding from landing containers — outranks it, because
   !important beats specificity. The result was a 900px column pinned to the
   edge of the viewport instead of the middle of the page. Width is left to
   site.css; only the centring it already intends is restored. */
body.sp-themed.single .entry-content {
  margin-inline: auto !important;
}

/* ---- headings ---------------------------------------------------------- */

.single-post .entry-content h2,
.single-post .entry-content h3 {
  font-family: 'Cairo', system-ui, sans-serif;
  color: var(--sp-blog-ink);
  line-height: 1.4;
  scroll-margin-top: 90px;
}

.single-post .entry-content h2 {
  font-size: clamp(1.35rem, 3.2vw, 1.75rem);
  font-weight: 800;
  margin: 2.5em 0 0.75em;
  padding-inline-start: 0.6em;
  /* Logical property so the rule sits on the right in Arabic and the left in
     the English translations TranslatePress serves from the same markup. */
  border-inline-start: 4px solid var(--sp-blog-brand);
}

.single-post .entry-content h2:first-child { margin-top: 0.5em; }

.single-post .entry-content h3 {
  font-size: clamp(1.1rem, 2.6vw, 1.3rem);
  font-weight: 700;
  margin: 2em 0 0.6em;
  color: var(--sp-blog-brand);
}

/* ---- body -------------------------------------------------------------- */

.single-post .entry-content p { margin: 0 0 1.4em; }

/* The opening paragraph carries the answer to the search query, so it is set
   slightly larger — it is the part most readers actually finish.
   :first-child, not :first-of-type: the older posts wrap everything in divs, and
   first-of-type would have boxed some paragraph in the middle of those. */
/* The opening paragraph sits in a tinted panel, so it is the one block whose
   surface must follow the theme explicitly rather than by inheritance. */
body.sp-themed.single .entry-content > p:first-child {
  font-size: 1.12rem;
  /* No colour here on purpose: site.css themes paragraph colour for light and
     dark, and overriding it would leave this one paragraph out of step. */
  background: var(--sp-blog-soft);
  border: 1px solid var(--sp-blog-line);
  border-radius: 14px;
  padding: 1.15em 1.3em;
  margin-bottom: 2em;
}

.single-post .entry-content strong { color: var(--sp-blog-ink); font-weight: 700; }

.single-post .entry-content a {
  color: var(--sp-blog-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.single-post .entry-content a:hover { text-decoration-thickness: 2px; }

/* ---- lists ------------------------------------------------------------- */

.single-post .entry-content ul,
.single-post .entry-content ol {
  margin: 0 0 1.6em;
  padding-inline-start: 1.4em;
}

.single-post .entry-content li { margin-bottom: 0.65em; padding-inline-start: 0.2em; }

.single-post .entry-content ul { list-style: none; padding-inline-start: 0; }

.single-post .entry-content ul > li {
  position: relative;
  padding-inline-start: 1.6em;
}

.single-post .entry-content ul > li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0.35em;
  top: 0.85em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sp-blog-brand);
}

.single-post .entry-content ol > li::marker {
  color: var(--sp-blog-brand);
  font-weight: 700;
}

/* ---- the closing "اقرأ أيضاً" block ------------------------------------- */

/* The related-links list always follows the last h2 of the post. Styling it as
   a card separates onward links from the argument above them. */
.single-post .entry-content h2:last-of-type + ul {
  background: #fff;
  border: 1px solid var(--sp-blog-line);
  border-radius: 14px;
  padding: 1.2em 1.4em;
  box-shadow: 0 2px 8px rgba(34, 53, 221, 0.06);
}

.single-post .entry-content h2:last-of-type + ul > li { margin-bottom: 0.5em; }
.single-post .entry-content h2:last-of-type + ul > li:last-child { margin-bottom: 0; }

/* ---- tables and quotes -------------------------------------------------- */

.single-post .entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.8em;
  font-size: 0.95rem;
}

.single-post .entry-content th,
.single-post .entry-content td {
  border: 1px solid var(--sp-blog-line);
  padding: 0.7em 0.9em;
  text-align: start;
}

.single-post .entry-content th { background: var(--sp-blog-soft); color: var(--sp-blog-ink); font-weight: 700; }

.single-post .entry-content blockquote {
  margin: 0 0 1.6em;
  padding: 0.2em 1.2em;
  border-inline-start: 4px solid var(--sp-blog-line);
  color: var(--sp-blog-muted);
  font-style: normal;
}

.single-post .entry-content em { color: var(--sp-blog-muted); }

.single-post .entry-content img { border-radius: 12px; height: auto; }

/* ---- small screens ------------------------------------------------------ */

@media (max-width: 600px) {
  .single-post .entry-content { font-size: 1rem; line-height: 1.9; }
  body.sp-themed.single .entry-content > p:first-child { font-size: 1.05rem !important; padding: 1em !important; }
}

/* ------------------------------------------------------------------------ *
 * Undoing site.css on single posts
 *
 * site.css carries two rules written for the landing pages, which are single
 * wp:html blocks where WordPress inserts stray <p> tags and unwanted list
 * spacing:
 *
 *   .entry-content.clear > p { display: none !important; ... }
 *   .entry-content ul, .entry-content ol { padding: 0 !important;
 *                                          margin: 0 !important;
 *                                          list-style: none !important; }
 *
 * site.css also loads on single posts, where those same selectors match real
 * article copy — so every top-level paragraph in a blog post was hidden. These
 * put it back, scoped to posts so the landing pages keep the behaviour they
 * were written for. !important is required only because the rules being undone
 * use it.
 * ------------------------------------------------------------------------ */

.single-post .entry-content.clear > p {
  display: block !important;
  margin: 0 0 1.4em !important;
  padding: 0 !important;
  height: auto !important;
  /* site.css zeroes these with !important, so they can only be restored with
     !important — set to the same values its own `body.sp-themed .entry-content p`
     rule uses, so a post paragraph reads exactly like every other themed page
     rather than inventing a second scale. Colour is deliberately left alone:
     site.css already themes it for light and dark. */
  line-height: 1.9 !important;
  font-size: 1.02rem !important;
}

body.sp-themed.single .entry-content.clear > p:first-child {
  font-size: 1.12rem !important;
  padding: 1.15em 1.3em !important;
  margin-bottom: 2em !important;
}

.single-post .entry-content ul,
.single-post .entry-content ol {
  margin: 0 0 1.6em !important;
  list-style: revert !important;
}

.single-post .entry-content ul {
  list-style: none !important;
  padding-inline-start: 0 !important;
}

.single-post .entry-content ol {
  padding-inline-start: 1.4em !important;
}

/* ------------------------------------------------------------------------ *
 * Dark theme
 *
 * The site toggles `body.dark-theme` from site.js and remembers the choice, so
 * the blog has to answer to the same switch rather than to prefers-color-scheme.
 * Only the tokens are redefined; every rule above reads through them.
 * ------------------------------------------------------------------------ */

body.dark-theme.single-post .entry-content {
  --sp-blog-ink: #f1f3ff;
  --sp-blog-body: #c3c8e8;
  --sp-blog-muted: #8f96bd;
  --sp-blog-brand: #8ea2ff;
  --sp-blog-soft: #171a35;
  --sp-blog-line: #2a2f55;
}

body.dark-theme.single-post .entry-content > p:first-child {
  background: #171a35;
  border-color: #2a2f55;
}

body.dark-theme.single-post .entry-content h2:last-of-type + ul {
  background: #12142a;
  box-shadow: none;
}

body.dark-theme.single-post .entry-content th {
  background: #171a35;
}

body.dark-theme.single-post .entry-content img {
  filter: brightness(.92);
}

/* ------------------------------------------------------------------------ *
 * Blog listing pagination
 *
 * UAGB renders WordPress's own paginate_links() markup — .page-numbers, with
 * .current on the active page — and ships no styling for it, so it arrived as
 * bare blue underlined numbers.
 * ------------------------------------------------------------------------ */

.uagb-post-pagination-wrap {
  --sp-pg-ink: #2f3352;
  --sp-pg-brand: #2235dd;
  --sp-pg-line: #e4e7fd;
  --sp-pg-surface: #ffffff;
  --sp-pg-hover: #f0f1fd;

  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  align-items: center;
  margin-top: 2.5rem;
  /* The numbers read left-to-right even in the Arabic listing; only the order
     of prev/next needs to follow the page direction, which flex handles. */
  direction: rtl;
}

.uagb-post-pagination-wrap .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 .85rem;
  border: 1px solid var(--sp-pg-line);
  border-radius: 10px;
  background: var(--sp-pg-surface);
  color: var(--sp-pg-ink);
  font-family: 'Cairo', system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.uagb-post-pagination-wrap a.page-numbers:hover,
.uagb-post-pagination-wrap a.page-numbers:focus-visible {
  background: var(--sp-pg-hover);
  border-color: var(--sp-pg-brand);
  color: var(--sp-pg-brand);
}

.uagb-post-pagination-wrap .page-numbers.current {
  background: var(--sp-pg-brand);
  border-color: var(--sp-pg-brand);
  color: #fff;
  cursor: default;
}

.uagb-post-pagination-wrap .prev.page-numbers,
.uagb-post-pagination-wrap .next.page-numbers {
  font-weight: 700;
}

body.dark-theme .uagb-post-pagination-wrap {
  --sp-pg-ink: #c3c8e8;
  --sp-pg-brand: #8ea2ff;
  --sp-pg-line: #2a2f55;
  --sp-pg-surface: #12142a;
  --sp-pg-hover: #1b1f3d;
}

body.dark-theme .uagb-post-pagination-wrap .page-numbers.current {
  color: #0a0b14;
}

@media (max-width: 600px) {
  .uagb-post-pagination-wrap .page-numbers {
    min-width: 38px;
    height: 38px;
    padding: 0 .65rem;
    font-size: .9rem;
  }
}