/*
  Blog-only styles. Loaded via the "Styles" section so the marketing pages
  do not pay for it.

  Palette is taken from the buttons in style.css rather than re-invented:
  purple is the primary, the pink-red is the accent.
*/
:root {
  --blog-purple: #ae39ff;
  --blog-purple-dark: #930ed8;
  --blog-accent: #fd2b6b;
  --blog-heading: #333;
  --blog-muted: #777;
  --blog-tint: #f7f2ff;
}

/* --- breadcrumb ---
   Sits on the dark breadcrumb-area banner, so it has to be light, not brand purple. */
.blog-breadcrumb {
  font-size: 14px;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, .6);
}

.blog-breadcrumb a {
  color: rgba(255, 255, 255, .6);
  transition: color .25s ease;
}

.blog-breadcrumb a:hover {
  color: #fff;
}

.blog-breadcrumb span {
  margin: 0 6px;
  color: rgba(255, 255, 255, .35);
}

/* Post titles are full sentences, unlike the short page titles the theme's
   340px column was sized for. Twice the width, post page only. */
.breadcrumb-area .page-title.post-page-title {
  width: 680px;
  max-width: 100%;
}

/* --- category chips / pagination / tags --- */
.blog-category-list,
.blog-pagination,
.post-tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-category-list li a,
.blog-pagination li a,
.blog-pagination li span {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 30px;
  background-color: var(--blog-tint);
  color: var(--blog-purple-dark);
  font-size: 14px;
  transition: background-color .25s ease, color .25s ease;
}

.blog-category-list li a:hover,
.blog-pagination li a:hover {
  background-color: var(--blog-purple);
  color: #fff;
}

.blog-pagination li span {
  background-color: transparent;
  color: var(--blog-muted);
}

/* Tags are secondary metadata: same chip shape, but quieter and smaller. */
.post-tags {
  gap: 8px;
}

.post-tags li span {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 30px;
  background-color: #f4f3f8;
  color: var(--blog-muted);
  font-size: 12px;
  line-height: 1.9;
}

/* --- post card: image on one side, text on the other, no card chrome --- */
.single-blog-card {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 44px;
  background: none;
  border: 0;
  box-shadow: none;
}

.single-blog-card .thumb {
  display: block;
  flex: 0 0 300px;
  max-width: 300px;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
}

.single-blog-card .thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .45s ease;
}

.single-blog-card:hover .thumb img {
  transform: scale(1.06);
}

.single-blog-card .content {
  flex: 1 1 auto;
  min-width: 0;
}

.single-blog-card .category {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--blog-accent);
  margin-bottom: 10px;
}

.single-blog-card .category:hover {
  color: var(--blog-purple);
}

.single-blog-card .title {
  font-size: 22px;
  line-height: 1.75;
  margin-bottom: 10px;
}

.single-blog-card .title a {
  color: var(--blog-heading);
}

.single-blog-card .title a:hover {
  color: var(--blog-purple);
}

.single-blog-card p {
  font-size: 15px;
  line-height: 2;
  color: var(--blog-muted);
  margin-bottom: 12px;
}

.single-blog-card .meta {
  display: flex;
  gap: 18px;
  font-size: 13px;
  color: var(--blog-muted);
  opacity: .85;
}

/* Vertical variant for the 3-column grids (home page, related posts). */
.single-blog-card.is-stacked {
  display: block;
  margin-bottom: 34px;
}

.single-blog-card.is-stacked .thumb {
  max-width: none;
  margin-bottom: 18px;
}

.single-blog-card.is-stacked .title {
  font-size: 19px;
}

@media (max-width: 767px) {
  .single-blog-card {
    display: block;
  }

  .single-blog-card .thumb {
    max-width: none;
    margin-bottom: 18px;
  }

  .single-blog-card .title {
    font-size: 19px;
  }
}

/* --- post meta panel --- */
.blog-post .post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  /* Own the spacing here so the panel does not depend on a utility class. */
  margin: 0 0 40px;
  padding: 22px 26px;
  border-radius: 14px;
  background-color: #f8f7fb;
}

.blog-post .post-meta-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.blog-post .post-meta dt {
  font-size: 12px;
  font-weight: 400;
  color: var(--blog-muted);
  opacity: .8;
}

.blog-post .post-meta dd {
  margin: 0;
  font-size: 15px;
  color: var(--blog-heading);
}

.blog-post .post-meta time {
  /* Persian digits read better without the browser's default number shaping. */
  font-variant-numeric: normal;
}

@media (max-width: 575px) {
  .blog-post .post-meta {
    gap: 14px 26px;
    padding: 18px 20px;
  }
}

/* --- table of contents --- */
.post-toc {
  margin: 0 0 40px;
  padding: 24px 28px;
  border-radius: 14px;
  background-color: #f8f7fb;
}

.post-toc-title {
  font-size: 16px;
  margin: 0 0 14px;
  color: var(--blog-heading);
}

.post-toc ol {
  margin: 0;
  padding: 0 20px 0 0;
  list-style: none;
}

.post-toc li {
  margin-bottom: 9px;
  font-size: 15px;
  line-height: 1.8;
}

/* A plain bullet, not a counter: headings often carry their own numbering
   ("۱. خواب کافی"), and a counter would render a second number beside it. */
.post-toc li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 10px;
  background-color: var(--blog-purple);
}

.post-toc .toc-level-3::before {
  background-color: #c9c6d4;
}

.post-toc .toc-level-3 {
  padding-right: 20px;
  font-size: 14px;
}

.post-toc a {
  color: var(--blog-muted);
}

.post-toc a:hover {
  color: var(--blog-purple);
}

/* Anchored headings should not hide under the sticky header when jumped to. */
.post-body h2[id],
.post-body h3[id] {
  scroll-margin-top: 90px;
}

/* --- FAQ --- */
.post-faq h2,
.post-sources h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: var(--blog-heading);
}

.post-faq dl {
  margin: 0;
}

.post-faq-item {
  padding: 18px 0;
  border-bottom: 1px solid #efecf5;
}

.post-faq-item:last-child {
  border-bottom: 0;
}

.post-faq dt {
  font-size: 17px;
  font-weight: 700;
  color: var(--blog-heading);
  margin-bottom: 8px;
}

.post-faq dd {
  margin: 0;
  font-size: 16px;
  line-height: 2;
  color: var(--blog-muted);
}

/* --- sources --- */
.post-sources ul {
  margin: 0;
  padding-right: 22px;
  list-style: disc;
  font-size: 15px;
  line-height: 2.1;
  color: var(--blog-muted);
}

.post-sources li {
  margin-bottom: 8px;
}

.post-sources a {
  overflow-wrap: anywhere;
}

.post-sources a:hover {
  color: var(--blog-accent);
}

/* --- author box --- */
.author-box {
  margin-top: 34px;
  padding: 26px 28px;
  border-radius: 14px;
  background-color: #f8f7fb;
}

.author-box-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  position: relative;
}

.author-avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

.author-avatar.is-large {
  width: 120px;
  height: 120px;
}

.author-identity {
  min-width: 0;
}

.author-role {
  display: inline-block;
  font-size: 10px;
  position: absolute;
  left: 0;
  margin-bottom: 4px;
}

.author-name {
  font-size: 19px;
  margin: 0 0 4px;
}

.author-name a {
  color: var(--blog-heading);
}

.author-name a:hover {
  color: var(--blog-purple);
}

.author-title,
.author-credentials {
  margin: 0;
  font-size: 14px;
  color: var(--blog-muted);
}

.author-summary {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 2;
  color: var(--blog-muted);
}

.author-links {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 14px;
}

.author-links a {
  color: var(--blog-purple-dark);
  overflow-wrap: anywhere;
}

.author-links a:hover {
  color: var(--blog-accent);
}

.author-profile {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  padding: 28px;
  border-radius: 16px;
  background-color: #f8f7fb;
  margin-bottom: 34px;
}

.author-profile-info {
  min-width: 0;
  flex: 1 1 auto;
}

.author-profile-name {
  font-size: 24px;
  color: var(--blog-heading);
  margin: 0 0 6px;
}

.author-profile .author-summary {
  margin-top: 12px;
}

/* Unapproved draft on the live template. Deliberately loud — the whole risk of a preview
   route is someone mistaking it for the published article. */
.preview-banner {
  position: relative;
  z-index: 3;
  background-color: #fff4d6;
  border-bottom: 2px solid #e0a800;
  color: #5c4300;
  font-size: 15px;
  line-height: 1.9;
  padding: 12px 0;
}

/* The navbar is `position: absolute; top: 0`, so by default it lands on top of whatever
   is at the top of the page — here, the banner and its own logo. Making the wrapper the
   navbar's containing block moves that origin down to just under the banner, whatever
   height the banner text happens to wrap to. Nothing else on the page moves. */
.preview-banner + .header-style-01 {
  position: relative;
}

.author-empty {
  margin: 0;
  font-size: 15px;
  line-height: 2;
  color: var(--blog-muted);
}

.author-empty a {
  color: var(--blog-purple-dark);
}

.author-empty a:hover {
  color: var(--blog-accent);
}


@media (max-width: 575px) {
  .author-profile {
    flex-direction: column;
    padding: 22px;
  }
}

@media (max-width: 575px) {
  .author-box-head {
    flex-direction: column;
  }
}

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

.blog-post .post-hero {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.post-body {
  font-size: 17px;
  line-height: 2.1;
  color: #444;
}

.post-body h2 {
  font-size: 26px;
  margin: 44px 0 16px;
  color: var(--blog-heading);
}

.post-body h3 {
  font-size: 21px;
  margin: 32px 0 12px;
  /* Headings stay neutral — colour is reserved for links and small accents. */
  color: var(--blog-heading);
}

.post-body p {
  margin-bottom: 18px;
}

/* Prose lists render natively here, unlike everywhere else on the site.
   The theme's global reset (style.css) strips `list-style` off every `ol li` and
   fakes the number with a `:before` counter, which is fine for its own design
   lists but wrong inside an article: the number ends up glued in front of the
   text with no marker column, so a wrapped line runs back under the number
   instead of lining up. These rules undo that for article bodies only.

   The indent is padding rather than margin so the marker gets its own gutter and
   the text edge stays straight; `padding-inline-start` puts that gutter on the
   right in our RTL pages without hard-coding a side. */
.post-body ul,
.post-body ol {
  margin: 0 0 22px;
  padding-inline-start: 26px;
  /* The theme sets a physical `padding-left` on every list, which in an RTL page
     lands on the outer edge and just adds dead space. Zeroed logically so this
     stays correct whichever direction the page runs. */
  padding-inline-end: 0;
}

.post-body ul {
  list-style: disc outside;
}

.post-body ol {
  list-style: decimal outside;
  counter-reset: none;
}

.post-body li {
  margin-bottom: 10px;
  list-style: inherit;
}

.post-body ol > li::before {
  content: none;
  counter-increment: none;
  margin: 0;
}

/* Nested lists: a sub-list is visually subordinate and should not repeat the
   parent's marker shape. */
.post-body ul ul {
  list-style-type: circle;
}

.post-body ul ul ul {
  list-style-type: square;
}

.post-body ol ol {
  list-style-type: lower-alpha;
}

.post-body li > ul,
.post-body li > ol {
  margin: 10px 0 0;
}

.post-body a {
  color: var(--blog-purple-dark);
  text-decoration: underline;
}

.post-body a:hover {
  color: var(--blog-accent);
}

.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 24px 0;
}

.post-body blockquote {
  margin: 26px 0;
  padding: 18px 22px;
  background-color: var(--blog-tint);
  border-radius: 10px;
}

.post-body blockquote p:last-child {
  margin-bottom: 0;
}

/* Wide tables must scroll inside the article, not the page. */
.post-body .table-wrap,
.post-body table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

.post-body table {
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
}

.post-body th,
.post-body td {
  border: 1px solid #ece6f5;
  padding: 11px 15px;
  text-align: right;
}

.post-body th {
  background-color: #f8f7fb;
  color: var(--blog-heading);
  font-weight: 700;
}

/* --- app download call to action ---
   Ported from the theme's "call-to-action-inner style-05" (the base rules were not
   in this project's style.css), mirrored for RTL and recoloured to the brand purple.
   The negative bottom margin lets the card overlap the section below it. */
.call-to-action-area {
  position: relative;
  z-index: 2;
}

.call-to-action-inner.style-05 {
  margin-bottom: -200px;
  padding: 30px 0 0 80px;
  border-radius: 20px;
  overflow: hidden;
  /* Kept exactly as the source theme defines it. */
  background: linear-gradient(90deg, #4785ec 0%, #3366c1 100%);
  text-align: right;
}

.call-to-action-inner.style-05 .row {
  align-items: center;
}

.call-to-action-inner.style-05 .call-action-img img {
  width: 300px;
  height: auto;
  display: block;
}

.call-to-action-inner.style-05 .call-to-action-content {
  padding: 60px 0;
}

.call-to-action-inner.style-05 .title {
  font-size: 38px;
  line-height: 1.6;
  color: #fff;
  margin-bottom: 12px;
  font-weight: 700;
}

.call-to-action-inner.style-05 .subtitle {
  color: rgba(255, 255, 255, .85);
  font-size: 16px;
  line-height: 2;
  margin: 0;
}

.call-to-action-inner.style-05 .apps-download {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
}

.call-to-action-inner.style-05 .download-img img {
  height: 54px;
  width: auto;
}

/* --- speech therapist invite --- */
.slp-invite-area {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  /* Leaves room for the CTA card above, which overlaps by 200px. */
  padding-top: 310px;
}

.slp-invite-area .section-title .title {
  margin-bottom: 14px;
}

.slp-invite-area .section-title p {
  font-size: 16px;
  line-height: 2.1;
  color: var(--blog-muted);
}

@media (max-width: 991px) {
  .call-to-action-inner.style-05 {
    margin-bottom: -140px;
    padding: 30px 24px 0;
    text-align: center;
  }

  .call-to-action-inner.style-05 .call-to-action-content {
    padding: 30px 0 50px;
  }

  .call-to-action-inner.style-05 .apps-download {
    justify-content: center;
  }

  .slp-invite-area {
    padding-top: 210px !important;
  }
}

/* --- disclaimer + CTA --- */
.post-disclaimer {
  padding: 18px 22px;
  border-radius: 12px;
  background-color: #fff1f5;
  font-size: 15px;
  color: var(--blog-muted);
}

.post-disclaimer p {
  margin: 0;
}

/* --- social icon links (author box + profile) --- */
.social-icon-links {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.social-icon-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 15px;
  transition: background-color .25s ease, color .25s ease;
}

.social-icon-links a:hover {
  background-color: var(--blog-purple);
  color: #fff;
}