/* tpl-article.css: GENERATED from prototype article.css (same order as the prototype head). */
/* ---- article.css ---- */
/* ==========================================================================
   article.css: page-only styles for article.html (Webflow CMS template "Posts")
   Owner: Designer 2 (UI/UX). Load order: ../tokens.css → styles.css → article.css
   Scope: article-progress_*, article-header_*, article-byline_*, article_layout,
   article-answer_*, article-takeaways_*, article-toc_*, .text-rich-text.is-article,
   article-cta-card_*, article-service_*, article-figure_*, article-sources_*,
   article-author_*, article-related_*.
   Shared components (header, breadcrumb, card, table, FAQ, CTA, form, sticky
   bar, sheet, footer) come from styles.css (Designer 1) and are not restyled.
   Reading-first: minimal motion, no scroll-jacking, content visible without JS.
   Items marked [ADD] extend the design system; listed in the handover.
   ========================================================================== */

/* ---------- Reading progress (motion #26) ---------- */
/* [ADD] 3px bar under the sticky header. Fill = transform scaleX, origin at the
   reading start (right in RTL). Colour amber-700 (4.81:1 on paper, 3:1 UI). */
.article-progress_component {
  position: fixed; inset-inline: 0; inset-block-start: var(--header-height); z-index: 39;
  block-size: 3px; pointer-events: none;
}
.article-progress_bar {
  block-size: 100%; background: var(--border-accent);
  transform: scaleX(0); transform-origin: var(--origin-start); will-change: transform;
}

/* ---------- Nav: "you are in this section" (guide is a child of the «الدليل» hub) ---------- */
/* Mirrors styles.css .nav_link[aria-current="page"]. [ADD] candidate for styles.css so every child page can use it. */
.nav_link[aria-current="true"] { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--amber-700); text-decoration-thickness: 2px; text-underline-offset: 0.5em; }

/* ---------- Sticky-bar trigger (blog-template §4: bar appears after ~40% scroll) ---------- */
/* Invisible sentinel covering the top 40% of the page. main.js shows the bar once it leaves the viewport. */
.article_sticky-sentinel { position: absolute; inset-inline-start: 0; inset-block: 0 60%; inline-size: 1px; pointer-events: none; visibility: hidden; }

/* ---------- Article container ---------- */
/* ≤991: one centred reading column. ≥992: prose column + TOC on the end side. */
.article_container { max-inline-size: var(--max-width-prose); margin-inline: auto; }
@media (min-width: 992px) { .article_container { max-inline-size: var(--container-medium); } }

/* ---------- Title block ---------- */
/* Tighter top on the article so the H1 (LCP) sits higher on a 375px screen */
.article_container.padding-section-small { padding-block-start: 1.25rem; }
@media (min-width: 992px) { .article_container.padding-section-small { padding-block-start: 2rem; } }
/* Current crumb = shortened title, one line, clipped with an ellipsis (blog-template §4 #1) */
.section_article .breadcrumb_item:last-child { min-inline-size: 0; flex: 1 1 8rem; }
.section_article .breadcrumb_item [aria-current="page"] { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-inline-size: 100%; }
.article-header_component { display: grid; gap: 1.25rem; padding-block: var(--space-small) var(--space-medium); }
@media (min-width: 992px) { .article-header_component { max-inline-size: 48rem; padding-block-end: var(--space-large); } }
/* [ADD] Article H1 scale 28 → 44px. A 40–70 char question H1 at the display token (32 → 56px)
   runs 4–5 lines at 375px; this keeps it to 3–4 and reads as a title, not a banner. */
.article-header_title { font-size: clamp(1.75rem, 1.3333rem + 1.8519vw, 2.75rem); line-height: 1.35; }

.article-byline_component { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.875rem; align-items: center; }
.article-byline_avatar { inline-size: 3rem; block-size: 3rem; border-radius: var(--radius-round); overflow: hidden; flex: none; }
.article-byline_avatar img, .article-byline_avatar .placeholder-media { inline-size: 100%; block-size: 100%; aspect-ratio: 1; object-fit: cover; padding: 0; }
.article-byline_text { display: grid; gap: 0.125rem; font-size: var(--font-size-small); line-height: 1.7; color: var(--text-muted); min-inline-size: 0; }
.article-byline_author { color: var(--text-primary); }
.article-byline_author a { font-family: var(--font-heading); font-weight: 600; text-decoration: none; }
@media (hover: hover) { .article-byline_author a:hover { text-decoration: underline; } }
.article-byline_meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.625rem; padding: 0; list-style: none; }
.article-byline_meta-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.article-byline_meta-item + .article-byline_meta-item::before { content: "·"; color: var(--steel-400); margin-inline-end: 0.25rem; } /* decorative separator */
.article-byline_meta-item .icon-embed-xsmall { color: var(--text-accent); }
.article-byline_update { font-size: 0.8125rem; color: var(--text-muted); }

/* ---------- Layout: intro + main + TOC ---------- */
.article_layout { display: grid; gap: var(--space-medium); grid-template-columns: minmax(0, 1fr); }
/* explicit minmax(0,1fr) track: an implicit auto track would grow to a wide table's min-content and push the page sideways */
.article_intro, .article_main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-medium); min-inline-size: 0; align-content: start; }
@media (min-width: 992px) {
  .article_layout {
    grid-template-columns: minmax(0, var(--max-width-prose)) minmax(13rem, 16rem);
    grid-template-areas: "intro toc" "main toc";
    justify-content: space-between; column-gap: clamp(2.5rem, 5vw, 4.5rem); row-gap: var(--space-large);
  }
  .article_intro { grid-area: intro; }
  .article_main { grid-area: main; }
  .article-toc_component { grid-area: toc; } /* end side = left in RTL (blog-template §5.3) */
}

/* ---------- Short answer box ---------- */
/* Tinted, editorial, no CTA inside (blog-template §4 #4). amber-800 label on amber-100 = 6.56:1;
   steel-900 text on amber-100 = 14.48:1. */
.article-answer_component {
  display: grid; gap: 0.5rem; padding: 1.25rem 1.25rem 1.375rem;
  background: var(--bg-accent-tint); border: 1px solid var(--amber-100); border-block-start: 2px solid var(--border-accent); border-radius: var(--radius-medium);
}
.article-answer_label { font-family: var(--font-heading); font-size: var(--font-size-small); line-height: 1.5; font-weight: 700; color: var(--text-accent); }
.article-answer_text { font-size: var(--font-size-large); line-height: var(--lh-large); color: var(--text-primary); }

/* Soft CTA: one text line, link style, not a button (blog-template §4 #5) */
.article-soft-cta { display: flex; gap: 0.625rem; align-items: flex-start; font-size: var(--font-size-medium); line-height: var(--lh-body); color: var(--text-secondary); }
.article-soft-cta .icon-embed-small { color: var(--text-accent); margin-block-start: 0.3em; }
.article-soft-cta a { color: var(--text-accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
@media (hover: hover) { .article-soft-cta a:hover { text-decoration-thickness: 2px; } }

/* ---------- Key takeaways ---------- */
.article-takeaways_component { padding: 1.25rem 1.25rem 1.5rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); }
.article-takeaways_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); margin-block-end: 1rem; }
.article-takeaways_rich ul { display: grid; gap: 0.75rem; padding: 0; list-style: none; }
/* Block + positioned marker (not grid): CMS bullets mix text, <strong> and <bdi>, and a grid would split them into cells */
.article-takeaways_rich li { position: relative; padding-inline-start: 1.375rem; line-height: 1.75; }
.article-takeaways_rich li::before { /* inspection-tag diamond, decorative */
  content: ""; position: absolute; inset-inline-start: 0.0625rem; inset-block-start: 0.65em;
  inline-size: 0.5rem; block-size: 0.5rem; background: var(--border-accent); transform: rotate(45deg);
}

/* ---------- Table of contents ---------- */
.article-toc_details { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-medium); }
.article-toc_summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-block-size: 3.25rem; padding: 0.75rem 1rem; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); border-radius: var(--radius-medium);
}
.article-toc_summary::-webkit-details-marker { display: none; }
.article-toc_summary-label { display: inline-flex; align-items: center; gap: 0.5rem; }
.article-toc_summary-label .icon-embed-small { color: var(--text-accent); }
.article-toc_caret { color: var(--text-accent); transition: transform var(--duration-base) var(--ease-out); }
.article-toc_details[open] .article-toc_caret { transform: rotate(180deg); }
@media (hover: hover) { .article-toc_summary:hover { background: var(--bg-alt); } }

.article-toc_list { counter-reset: toc; display: grid; gap: 0.125rem; margin: 0; padding: 0 0.5rem 0.75rem; list-style: none; }
.article-toc_link {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.5rem; align-items: start;
  min-block-size: 2.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-small);
  border-inline-start: 2px solid transparent;
  font-size: var(--font-size-small); line-height: 1.6; color: var(--text-secondary); text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.article-toc_link::before { counter-increment: toc; content: counter(toc); font-family: var(--font-heading); font-weight: 600; color: var(--text-muted); }
@media (hover: hover) { .article-toc_link:hover { background: var(--bg-alt); color: var(--text-primary); } }
/* Current section: weight + start border + tint, never colour alone */
.article-toc_link[aria-current="true"] { background: var(--bg-alt); color: var(--text-primary); font-weight: 600; border-inline-start-color: var(--border-accent); }
.article-toc_link[aria-current="true"]::before { color: var(--text-accent); }

@media (min-width: 992px) {
  .article-toc_details {
    position: sticky; inset-block-start: calc(var(--header-height) + 1.5rem);
    max-block-size: calc(100dvh - var(--header-height) - 3rem); overflow-y: auto;
    background: transparent; border: 0; border-inline-start: 1px solid var(--border-subtle); border-radius: 0;
  }
  .article-toc_summary { cursor: default; min-block-size: 2.5rem; padding-block: 0 0.5rem; font-size: var(--font-size-small); color: var(--text-muted); }
  .article-toc_summary:hover { background: none; }
  .article-toc_caret { display: none; }
  .article-toc_list { padding: 0; }
  .article-toc_link { border-start-start-radius: 0; border-end-start-radius: 0; } /* flat on the marker side */
}

/* ---------- Rich text: long-form article body ---------- */
/* [ADD] Client-First .text-rich-text with an is-article combo. ~40rem measure
   (≈65–75 Arabic characters at 17px), line-height 1.8, text-align start (never justify). */
.text-rich-text.is-article { font-size: var(--font-size-medium); line-height: var(--lh-body); color: var(--text-primary); overflow-wrap: break-word; }
.text-rich-text.is-article > * + * { margin-block-start: 1.25rem; }
.text-rich-text.is-article > :first-child { margin-block-start: 0; }
.text-rich-text.is-article > h2 {
  margin-block: 3rem 1rem; font-size: clamp(1.375rem, 1.1667rem + 0.9259vw, 1.875rem); line-height: 1.4;
}
.text-rich-text.is-article > h2:first-child { margin-block-start: 0; }
.text-rich-text.is-article > h3 { margin-block: 2rem 0.75rem; font-size: var(--font-size-h4); line-height: var(--lh-h4); }
.text-rich-text.is-article > h2 + *, .text-rich-text.is-article > h3 + * { margin-block-start: 0; }
.text-rich-text.is-article p { max-inline-size: var(--max-width-prose); }
.text-rich-text.is-article ul, .text-rich-text.is-article ol { display: grid; gap: 0.625rem; padding-inline-start: 1.5rem; }
.text-rich-text.is-article li { padding-inline-start: 0.25rem; }
.text-rich-text.is-article ul > li::marker { color: var(--text-accent); }
.text-rich-text.is-article ol > li::marker { font-family: var(--font-heading); font-weight: 700; color: var(--text-accent); }
.text-rich-text.is-article a {
  color: var(--text-accent); font-family: inherit; font-weight: inherit; /* underline + colour mark links; font and weight stay calm in running text (overrides the global .text-rich-text a) */
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
@media (hover: hover) { .text-rich-text.is-article a:hover { text-decoration-thickness: 2px; } }
.text-rich-text.is-article strong { font-weight: 600; }
/* Webflow's RTE "Quote" block, used here as a practitioner callout */
.text-rich-text.is-article blockquote {
  margin-block: 2rem; padding: 1rem 1.25rem;
  background: var(--bg-alt); border-inline-start: 4px solid var(--steel-900); border-radius: var(--radius-medium);
  font-family: var(--font-heading); font-size: var(--font-size-large); font-weight: 500; line-height: 1.75; color: var(--text-primary);
}
.text-rich-text.is-article figure { margin-block: 2rem; }
.text-rich-text.is-article figcaption, .article-figure_caption {
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-block-start: 0.75rem;
  font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-muted);
}
.text-rich-text.is-article hr { border: 0; block-size: 1px; background: var(--border-subtle); margin-block: 2.5rem; }
.text-rich-text.is-article .table_wrapper { margin-block: 1.5rem 0; }
.text-rich-text.is-article .article_table-source { margin-block-start: 0.5rem; font-size: 0.8125rem; line-height: 1.6; color: var(--text-muted); }

/* ---------- Tables inside the article ---------- */
/* Tables are rich-text embeds (Webflow RTE has no native table [verify-WF]).
   The wrapper (styles.css .table_wrapper) scrolls; the page never does. */
.text-rich-text.is-article .table_wrapper { overscroll-behavior-x: contain; max-inline-size: 100%; }
/* [ADD] is-wide: 3–4 column tables keep a readable min width and scroll inside the wrapper at 375px */
.table_component.is-wide { min-inline-size: 38rem; }
.table_component.is-wide td:last-child { white-space: normal; min-inline-size: 8rem; }
/* [ADD] is-sticky-first: first column (row headers) stays put while the rest scrolls (blog-template §9 #3) */
.table_component.is-sticky-first tr > :first-child {
  position: sticky; inset-inline-start: 0; z-index: 1; inline-size: 9rem; min-inline-size: 9rem;
  background: var(--bg-surface);
}
.table_component.is-sticky-first thead tr > :first-child { background: var(--steel-900); }
.table_component.is-sticky-first tbody tr:nth-child(even) > :first-child { background: var(--steel-50); }
.table_component.is-sticky-first tr > :first-child::after { /* separator that travels with the sticky cell */
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 1px; background: var(--border-subtle);
}
.table_component tbody th { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }
@media (min-width: 992px) {
  .table_component.is-sticky-first tr > :first-child { inline-size: auto; min-inline-size: 10rem; }
}
/* [ADD] is-plain-last: last column is prose, not a short value (overrides the nowrap/heading style) */
.table_component.is-plain-last td:last-child { font-family: var(--font-body); font-weight: 400; white-space: normal; }
/* Scroll hint: inserted by article.js only when the table actually overflows */
.article_table-hint { display: flex; align-items: center; gap: 0.375rem; margin-block-start: 0.5rem; font-size: 0.8125rem; color: var(--text-muted); }
.article_table-hint .icon-embed-xsmall { color: var(--text-accent); }

/* ---------- Main image / before-after figure ---------- */
.article-figure_pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.article-figure_item { position: relative; border-radius: var(--radius-medium); overflow: hidden; }
.article-figure_item img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.article-figure_tag {
  position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; z-index: 1;
  font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; line-height: 1.5;
  padding: 0.125rem 0.5rem; border-radius: var(--radius-small); background: var(--steel-950); color: var(--white);
}
.article-figure_tag.is-after { background: var(--amber-500); color: var(--steel-950); }

/* ---------- Intent CTA card (after body-1) ---------- */
/* Quiet surface (blog-template §4 #9): steel-50, not the button colour. One button. */
.article-cta-card_component {
  display: grid; gap: 1rem; padding: 1.5rem;
  background: var(--bg-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-large);
}
@media (min-width: 768px) { .article-cta-card_component { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; } .article-cta-card_content { grid-column: 2; } }
.article-cta-card_content { display: grid; gap: 0.5rem; justify-items: start; }
.article-cta-card_title { font-family: var(--font-heading); font-size: var(--font-size-h4); line-height: var(--lh-h4); font-weight: 700; color: var(--text-primary); }
.article-cta-card_text { color: var(--text-secondary); }
.article-cta-card_content .button { margin-block-start: 0.5rem; }
@media (max-width: 478px) { .article-cta-card_content .button { inline-size: 100%; } }

/* ---------- Service box (after body-2) ---------- */
/* Dark steel surface so it can't be confused with the answer box or the CTA card. */
.article-service_component { display: grid; gap: 1rem; padding: 1.5rem; border-radius: var(--radius-large); }
@media (min-width: 768px) { .article-service_component { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; } .article-service_content { grid-column: 2; } }
.article-service_component .card_icon { background: var(--steel-800); }
.article-service_content { display: grid; gap: 0.5rem; justify-items: start; }
.article-service_name { font-family: var(--font-heading); font-size: var(--font-size-h4); line-height: var(--lh-h4); font-weight: 700; color: var(--text-primary); }
.article-service_text { color: var(--text-secondary); }
.article-service_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-block-start: 0.5rem; }
@media (max-width: 478px) { .article-service_actions .button.is-secondary { inline-size: 100%; } }

/* ---------- FAQ inside the article column ---------- */
.article_faq .faq_list { max-inline-size: none; margin-inline: 0; }
.article_faq-title { font-size: clamp(1.375rem, 1.1667rem + 0.9259vw, 1.875rem); line-height: 1.4; margin-block-end: 1rem; }

/* ---------- Sources ---------- */
.article-sources_component { display: grid; gap: 1rem; }
.article-sources_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); }
.article-sources_rich ol { display: grid; gap: 0.75rem; padding-inline-start: 1.5rem; font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-secondary); }
.article-sources_rich li::marker { font-family: var(--font-heading); font-weight: 600; color: var(--text-muted); }
.article-sources_rich a { color: var(--text-accent); overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 0.25em; }
.article-sources_rich cite { font-style: normal; font-weight: 600; color: var(--text-primary); }

/* ---------- Author box ---------- */
.article-author_component {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.25rem; align-items: start;
  padding: 1.5rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large);
}
.article-author_photo { inline-size: 4.5rem; block-size: 4.5rem; border-radius: var(--radius-round); overflow: hidden; }
.article-author_photo img, .article-author_photo .placeholder-media { inline-size: 100%; block-size: 100%; aspect-ratio: 1; object-fit: cover; padding: 0; }
.article-author_content { display: grid; gap: 0.375rem; min-inline-size: 0; }
.article-author_name { font-family: var(--font-heading); font-size: var(--font-size-h4); line-height: var(--lh-h4); font-weight: 700; }
.article-author_role { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 500; color: var(--text-accent); }
.article-author_bio { color: var(--text-secondary); font-size: var(--font-size-medium); line-height: var(--lh-body); }
.article-author_credentials { margin-block-start: 0.25rem; font-size: var(--font-size-small); }
@media (max-width: 478px) { .article-author_component { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Related posts + related services ---------- */
.article-related_media { border-radius: var(--radius-medium); overflow: hidden; }
.article-related_media .placeholder-media, .article-related_media img { aspect-ratio: 16 / 9; inline-size: 100%; block-size: auto; object-fit: cover; }
.article-related_category { font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; color: var(--text-accent); }
.article-related_date { font-size: 0.8125rem; color: var(--text-muted); }
.article-related-services_list { display: flex; flex-wrap: wrap; gap: 0 1.5rem; padding: 0; margin-block-start: 0.25rem; list-style: none; }
.article-related-services_title { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-muted); margin-block-start: var(--space-large); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .article-toc_caret, .article-toc_link { transition: none; }
}