/* ==========================================================================
   The article page — issue #1164 (PRD #1072)

   The 30 SEO articles ship as plain HTML with four structural classes and no
   CSS at all: `nav.toc`, `section.faq`, `div.answer` and 134 bare `<table>`
   elements. Bootstrap 4 gives a table nothing unless it has `.table`, so every
   article read as run-together text and a wide table pushed the whole page
   sideways on a phone.

   This file is the whole fix. Rules to know before you edit it:

   1. EVERY selector is scoped under `.article-body`. Without the scope a bare
      `table {}` here would repaint every table in the panel and the storefront.
      `tests/Unit/ArticleStylesTest.php` fails if a rule escapes the scope.
   2. The article HTML is NOT touched. `page_schema_faq()` reads the FAQ shape
      for structured data, so the FAQ is styled exactly as it is written.
   3. Logical properties only — `margin-inline-start`, not `margin-left`. The
      site is Arabic RTL and the same page also serves English pages.
   4. Mobile first. The phone rules come first, the wide screen adds to them.

   Brand: vermilion #FD3F0F, cream #FFFBF7, ink #303030, Tajawal, English
   digits, light only.
   ========================================================================== */

.article-body {
	color-scheme: light;

	--art-cream: #FFFBF7;
	--art-paper: #FFFFFF;
	--art-ink: #303030;
	--art-muted: #78716C;
	--art-sand: #EFE7E0;
	--art-sand-deep: #E3D7CE;
	--art-vermilion: #FD3F0F;
	--art-deep: #C23934;
	--art-peach: #FED7CB;
	--art-peach-soft: #FFF0E9;

	--art-face: 'Tajawal', 'IBM Plex Sans Arabic', system-ui, Arial, sans-serif;

	/* Two widths, and only two. Prose is capped at a comfortable Arabic line of
	   about 60 to 70 characters. A block that is not prose — the table of
	   contents, a table, the lead, an answer — gets the wider one, so the page
	   still reads as a single column instead of a text column with full width
	   slabs floating next to it. */
	--art-measure: 68ch;
	--art-block: 900px;
	--art-r-sm: 6px;
	--art-r-md: 10px;
	--art-r-lg: 14px;

	color: var(--art-ink);
	font-family: var(--art-face);
	font-size: 17px;
	/* Arabic needs more line height than Latin — diacritics need the room. */
	line-height: 1.9;
	/* Digits stay English and keep an even width, per the brand. */
	font-variant-numeric: tabular-nums;
	/* A long URL must wrap instead of widening the page. */
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

.article-body *,
.article-body *::before,
.article-body *::after { box-sizing: border-box }

/* ==========================================================================
   Text
   ========================================================================== */

.article-body p {
	margin: 0 0 20px;
	max-width: var(--art-measure);
}

.article-body strong { font-weight: 700 }

/* The answer paragraph. Google reads it first, so does the reader. */
.article-body p.lead {
	font-size: 1.12em;
	font-weight: 500;
	line-height: 1.85;
	color: var(--art-ink);
	background: var(--art-peach-soft);
	border: 1px solid var(--art-peach);
	border-radius: var(--art-r-lg);
	padding: 18px 20px;
	margin-block-end: 28px;
	max-width: var(--art-block);
}

/* A short aside inside the flow. */
.article-body p.note {
	font-size: .95em;
	color: #55504B;
	background: var(--art-cream);
	border-inline-start: 3px solid var(--art-sand-deep);
	border-radius: 0 var(--art-r-sm) var(--art-r-sm) 0;
	padding: 12px 16px;
	margin-block-end: 24px;
}

/* The paragraph that admits the weak side. It should read calmer, not louder. */
.article-body p.honest {
	border-inline-start: 3px solid var(--art-vermilion);
	background: var(--art-peach-soft);
	border-radius: 0 var(--art-r-sm) var(--art-r-sm) 0;
	padding: 14px 18px;
	margin-block-end: 24px;
}

/* The call to action at the end of a section. */
.article-body p.cta {
	font-weight: 500;
	background: var(--art-paper);
	border: 1px solid var(--art-peach);
	border-radius: var(--art-r-lg);
	padding: 18px 20px;
	margin-block: 28px;
	max-width: var(--art-block);
}
.article-body p.cta a { font-weight: 700 }

/* Text the merchant is meant to copy into their own store. */
.article-body .copy-block {
	background: var(--art-paper);
	border: 1px dashed var(--art-sand-deep);
	border-radius: var(--art-r-lg);
	padding: 20px 22px;
	margin-block: 28px;
	max-width: var(--art-block);
}
.article-body .copy-block p:last-child,
.article-body .copy-block ul:last-child,
.article-body .copy-block ol:last-child { margin-block-end: 0 }

.article-body blockquote {
	margin: 28px 0;
	padding: 4px 20px;
	border-inline-start: 3px solid var(--art-peach);
	color: #55504B;
}

.article-body code {
	font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Courier New', monospace;
	font-size: .9em;
	direction: ltr;
	unicode-bidi: isolate;
	background: var(--art-cream);
	border: 1px solid var(--art-sand);
	border-radius: var(--art-r-sm);
	padding: 2px 6px;
}

/* ==========================================================================
   Headings — a reader scans a 4,000 word article, they do not read it all
   ========================================================================== */

.article-body h2 {
	font-size: clamp(22px, 5vw, 28px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--art-ink);
	margin: 48px 0 16px;
	/* The table of contents jumps here — leave air above the target. */
	scroll-margin-block-start: 24px;
	text-wrap: balance;
}

.article-body h3 {
	font-size: clamp(18px, 4vw, 21px);
	font-weight: 700;
	line-height: 1.5;
	color: var(--art-ink);
	margin: 32px 0 12px;
	scroll-margin-block-start: 24px;
}

.article-body h4 {
	font-size: 17px;
	font-weight: 700;
	margin: 24px 0 10px;
}

/* The first block of the article should not start with a big gap. */
.article-body > *:first-child { margin-block-start: 0 }

/* ==========================================================================
   Lists
   ========================================================================== */

.article-body ul,
.article-body ol {
	margin: 0 0 20px;
	padding-inline-start: 22px;
	max-width: var(--art-measure);
}
.article-body li { margin-block-end: 8px }
.article-body li::marker { color: var(--art-vermilion) }
.article-body li > ul,
.article-body li > ol { margin-block: 8px 0 }

/* ==========================================================================
   Links — a link must be visible inside a wall of Arabic text
   ========================================================================== */

.article-body a {
	color: var(--art-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.article-body a:hover {
	color: var(--art-vermilion);
	text-decoration-thickness: 2px;
}
.article-body a:focus-visible {
	outline: 3px solid var(--art-vermilion);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ==========================================================================
   The table of contents

   It sits near the top of a long article and is the main way a reader jumps to
   the part they came for. So it is a box they can see and skip from, never a
   bullet list.
   ========================================================================== */

.article-body .toc {
	background: var(--art-paper);
	border: 1px solid var(--art-sand-deep);
	border-inline-start: 4px solid var(--art-vermilion);
	border-radius: var(--art-r-lg);
	padding: 20px 22px;
	margin-block: 8px 36px;
	max-width: var(--art-block);
}

/* This H2 is a label, not a section heading. */
.article-body .toc h2 {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--art-muted);
	margin: 0 0 12px;
}

.article-body .toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

.article-body .toc li {
	margin: 0;
	border-block-start: 1px solid var(--art-sand);
}
.article-body .toc li:first-child { border-block-start: 0 }

.article-body .toc a {
	display: block;
	padding: 9px 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--art-ink);
	text-decoration: none;
}
.article-body .toc a:hover {
	color: var(--art-vermilion);
	text-decoration: underline;
}

/* ==========================================================================
   Tables — the biggest part of this file

   There are 134 tables. None of them has a class, and none of them has a
   wrapper element. So the TABLE ITSELF is made the horizontal scroll box:
   `display: block` turns it into a normal block, the rows are re-wrapped by
   the browser into an anonymous table inside it, and `overflow-x: auto` lets
   that inner table slide sideways. The page body never moves.

   No JavaScript, and not one of the 134 tables is edited.

   One thing follows from having no wrapper: the rows inside that block only
   take the width they need, so the block is often wider than the table. That
   is why the frame is drawn on the CELLS and not on the block — a border on
   the block would draw a big empty box around a small table.
   ========================================================================== */

.article-body table {
	display: block;
	width: 100%;
	max-width: min(100%, var(--art-block));
	overflow-x: auto;
	border-collapse: collapse;
	margin-block: 24px 28px;
	font-size: 15px;
	line-height: 1.7;
	-webkit-overflow-scrolling: touch;
}

.article-body th,
.article-body td {
	text-align: start;
	vertical-align: top;
	padding: 12px 14px;
	border: 1px solid var(--art-sand);
	/* This is what turns the scrollbar on. A column is never squeezed thinner
	   than this, so a table with 4 columns is wider than a phone and slides
	   inside its own box. A 2 or 3 column table still fits and does not
	   scroll for no reason. The text inside the column still wraps. */
	min-width: 9em;
}

.article-body th {
	font-weight: 700;
	font-size: 14px;
	color: var(--art-ink);
	background: var(--art-peach-soft);
	border-color: var(--art-peach);
}

/* The articles write the header row as plain `<tr><th>` with no `<thead>`, so
   the shading counts from the header row down. */
.article-body tbody tr { background: var(--art-paper) }
.article-body tbody tr:nth-child(even) { background: #FCF9F6 }

/* ==========================================================================
   The FAQ

   #1073 reads this block with `page_schema_faq()` to emit FAQPage structured
   data. The HTML shape must not change — it is styled exactly as written:
   `section.faq > h3` is the question, `div.answer` is the answer.
   ========================================================================== */

.article-body .faq { margin-block-start: 48px }

.article-body .faq h3 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--art-ink);
	margin: 28px 0 0;
	padding-inline-start: 26px;
	position: relative;
}

/* A quiet marker, so a question never reads as a section heading. It is a dot
   and not a "؟" on purpose: the question already ends with one, and a screen
   reader would read the second one out loud. */
.article-body .faq h3::before {
	content: "";
	position: absolute;
	inset-inline-start: 4px;
	top: .65em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--art-vermilion);
}

.article-body .answer {
	background: var(--art-paper);
	border: 1px solid var(--art-sand-deep);
	border-radius: var(--art-r-md);
	padding: 14px 18px;
	margin-block: 10px 0;
	max-width: var(--art-block);
}
.article-body .answer p { margin: 0; max-width: none }
.article-body .answer p + p { margin-block-start: 12px }

/* ==========================================================================
   Pictures — issue #1165

   A picture in an article is a screenshot of the panel, shown as evidence that
   the screen exists. So it is framed like a window and captioned, never bled to
   the edge like a magazine photo.

   The `<img>` carries `width` and `height` from the help centre's `sizes.json`.
   `height: auto` here does NOT throw those away: a modern browser reads the two
   attributes as an aspect ratio and keeps the box the right height before the
   bytes arrive. That is the whole layout-shift fix, and it only works while
   BOTH attributes are on the tag — `tests/Unit/ArticleImagesTest.php` fails if
   one goes missing.
   ========================================================================== */

.article-body img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--art-r-lg);
	border: 1px solid var(--art-sand);
	/* The screenshots are light. A tinted bed keeps a white panel from melting
	   into a white page while it is still loading. */
	background: var(--art-cream);
}

.article-body figure {
	margin: 28px 0;
	max-width: var(--art-block);
}

.article-body figcaption {
	margin-block-start: 10px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--art-muted);
}

/* A screenshot of our own panel. The caption is the one line that says what to
   look at, so it is marked, not floated in grey. */
.article-body .article-shot figcaption {
	border-inline-start: 3px solid var(--art-peach);
	padding-inline-start: 12px;
}

/* Issue #1184 — where an outside screenshot came from, and when.
   A price on سلة or a rule on زاتكا is true on a day, not forever. The line
   sits on its own row under the caption so the reader meets the date without
   hunting for it, and is set smaller because it is the footnote, not the
   point. `unicode-bidi: isolate` keeps a Latin host name like `zid.sa/pricing`
   from dragging the Arabic around it out of order. */
.article-body .article-shot-source {
	display: block;
	margin-block-start: 4px;
	font-size: 12.5px;
	color: var(--art-muted);
	opacity: 0.85;
	unicode-bidi: isolate;
}

/* A phone screenshot. Blown up to the 900px article column it renders about
   1,800px tall and fills the whole screen with one picture, so it is held near
   the width of a real phone and centred instead. */
.article-body .article-shot[data-image-shape="portrait"] img {
	width: auto;
	max-width: min(100%, 300px);
	margin-inline: auto;
}

/* ==========================================================================
   Drawings — issue #1183

   A `diagram` slot is a drawing we make ourselves, written into the article as
   an inline `<svg>`. See app/helpers/article_diagram.php for why it is not a
   picture file.

   Two things happen here, and nothing else:

   1. The drawing is held to a sensible width. The canvas is 380 units wide,
      about the width of a phone, so at 390px it renders roughly 1:1 and its
      13-unit text is real 13px text. Left alone it would stretch to the 900px
      article column on a laptop and the labels would render half again too
      big. `max-width` stops that. There is no media query: one cap works at
      every width because an SVG scales as one block.

   2. The shapes are painted from the SAME variables as the rest of the page.
      Every shape also carries a plain colour attribute as a fallback, and a
      rule here beats an attribute, so this file is what decides. That is the
      whole point of drawing them instead of pasting a picture: when the theme
      moves, the drawings move with it.
   ========================================================================== */

.article-body .article-diagram { margin: 28px 0 }

.article-body .article-diagram svg {
	display: block;
	width: 100%;
	/* Wide enough to read on a laptop, narrow enough that the text does not
	   blow up. Measured against the 380-unit canvas: this is about 1.4x. */
	max-width: 520px;
	/* The viewBox already fixes the shape. `height: auto` lets it. */
	height: auto;
	margin-inline: auto;
	/* The drawing is a block of the article, so it reads on the same paper. */
	background: var(--art-paper);
	border: 1px solid var(--art-sand);
	border-radius: var(--art-r-lg);
	padding: 6px;
}

/* The labels are the article's own type, not the browser's default serif. */
.article-body .article-diagram text {
	font-family: var(--art-face);
	font-variant-numeric: tabular-nums;
}

/* A box. The quiet default. */
.article-body .article-diagram .d-box {
	fill: var(--art-paper);
	stroke: var(--art-sand-deep);
}

/* The box that carries the point of the drawing. */
.article-body .article-diagram .d-accent {
	fill: var(--art-peach-soft);
	stroke: var(--art-peach);
}

/* The right way, and the wrong way. Told apart by the OUTLINE and by the tick
   or the cross inside them, never by colour alone — a reader who cannot tell
   the two apart still sees which is which. */
.article-body .article-diagram .d-good { stroke: var(--art-vermilion) }
.article-body .article-diagram .d-bad {
	fill: var(--art-cream);
	stroke: var(--art-sand-deep);
}

.article-body .article-diagram .d-arrow { stroke: var(--art-sand-deep) }
.article-body .article-diagram .d-rule { stroke: var(--art-sand) }

.article-body .article-diagram .d-badge { fill: var(--art-vermilion) }
.article-body .article-diagram .d-badge-text { fill: var(--art-paper) }

.article-body .article-diagram .d-lead { fill: var(--art-deep) }
.article-body .article-diagram .d-meta,
.article-body .article-diagram .d-line { fill: var(--art-muted) }
.article-body .article-diagram .d-value { fill: var(--art-deep) }

.article-body .article-diagram .d-track {
	fill: var(--art-cream);
	stroke: var(--art-sand);
}
.article-body .article-diagram .d-bar { fill: var(--art-peach) }
.article-body .article-diagram .d-bar-key { fill: var(--art-vermilion) }
.article-body .article-diagram .d-bar-soft { fill: var(--art-sand-deep) }
.article-body .article-diagram .d-bar-bad { fill: var(--art-deep) }

.article-body .article-diagram .d-tick { stroke: var(--art-vermilion) }
.article-body .article-diagram .d-cross { stroke: var(--art-muted) }

/* The caption reads the same as a screenshot caption. A reader should not have
   to learn a second shape because one picture was drawn and one was taken. */
.article-body .article-diagram figcaption {
	border-inline-start: 3px solid var(--art-peach);
	padding-inline-start: 12px;
}

/* ==========================================================================
   Wider screens
   ========================================================================== */

@media (min-width: 767px) {
	.article-body { font-size: 18px }

	.article-body p.lead { padding: 22px 26px }

	.article-body .toc { padding: 24px 28px }

	/* Ten or more entries in one column is a long scroll on a laptop. */
	.article-body .toc ul { columns: 2; column-gap: 40px }
	.article-body .toc li { break-inside: avoid }

	.article-body th,
	.article-body td { padding: 14px 18px }
}

/* ==========================================================================
   Print

   The reader wants the words. The table of contents is only useful when the
   page can be clicked, so it does not print. The print button hides itself
   with Bootstrap's `d-print-none` in the view.
   ========================================================================== */

@media print {
	.article-body .toc { display: none }

	.article-body {
		font-size: 12pt;
		line-height: 1.7;
	}

	.article-body table {
		display: table;
		overflow-x: visible;
		break-inside: auto;
	}

	.article-body tr,
	.article-body .answer,
	.article-body .copy-block { break-inside: avoid }

	.article-body a { text-decoration: underline }
}