/* ─────────────────────────────────────────────────────────────
   solutions.css — shared layout for the /whatsapp-* content pages.

   These pages exist to rank for high-intent Arabic search and to convert
   the merchant who arrives from it, so they are deliberately built lighter
   than index.html:

   - No `theme-lang.js` (279 KB). Its only jobs on a page like this would be
     the language toggle and the i18n dictionary, and these pages are
     Arabic-only by design (see docs/SEO_FOUNDATION.md § language strategy).
     Shipping a half-translated English view would be worse than shipping
     none, so the language toggle is not offered here at all.
   - No `html.i18n-pending { visibility: hidden }` gate. That gate exists to
     hide a flash of untranslated copy until theme-lang.js resolves; with no
     i18n on the page there is nothing to hide, and hiding the body from a
     crawler for up to 2 s to solve a problem the page does not have would
     be a pure loss.
   - No GSAP. Nothing here animates on scroll, so there is no reason to make
     the text depend on a CDN script loading.

   Everything visual comes from style.css's tokens, so these pages inherit
   the product's palette, dark mode and contrast work for free.
   ───────────────────────────────────────────────────────────── */

.solution-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 132px 20px 80px;
}

/* ── Breadcrumb ── */
.solution-crumbs {
    font-size: var(--fs-sm);
    color: var(--text-light);
    margin-bottom: 22px;
}
/* NG5 (WCAG 2.5.8): a breadcrumb is a row of navigation links, not a link
   inside a sentence, so the inline-text exception does not apply. Measured
   40.8×19 before; the padding lifts the target to the 24px floor without
   changing the visible text size, and 44px under a coarse pointer. */
.solution-crumbs a {
    color: var(--text-muted);
    text-decoration: none;
    display: inline-block;
    padding: 4px 2px;
    min-height: 24px;
    line-height: 16px;
}
.solution-crumbs a:hover { text-decoration: underline; }
.solution-crumbs span[aria-current] { color: var(--text-light); }

/* ── Page head ── */
.solution-wrap h1 {
    font-size: clamp(27px, 4.2vw, 40px);
    line-height: 1.35;
    margin-bottom: 14px;
    color: var(--text-main);
}
.solution-lede {
    font-size: var(--fs-lg);
    line-height: 1.95;
    color: var(--text-muted);
    margin-bottom: 14px;
}
.solution-updated {
    font-size: var(--fs-sm);
    color: var(--text-light);
    margin-bottom: 42px;
}

/* ── Sections ── */
.solution-wrap section { margin-bottom: 40px; }
.solution-wrap h2 {
    font-size: clamp(20px, 2.6vw, 26px);
    margin-bottom: 14px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
}
.solution-wrap h2 i { color: var(--wa-green-dark); font-size: 0.85em; }
body.dark-mode .solution-wrap h2 i { color: var(--wa-green); }
.solution-wrap h3 {
    font-size: var(--fs-lg);
    margin: 24px 0 8px;
    color: var(--text-main);
}
.solution-wrap p,
.solution-wrap li {
    color: var(--text-muted);
    line-height: 2.05;
    font-size: var(--fs-md);
}
.solution-wrap p { margin-bottom: 12px; }
.solution-wrap ul, .solution-wrap ol { padding-inline-start: 24px; margin: 10px 0 16px; }
.solution-wrap li { margin-bottom: 9px; }
.solution-wrap strong { color: var(--text-main); }
/* --wa-green-dark (var(--wa-green-dark)) measures only 3.95:1 on --bg-main, under the
   4.5:1 AA floor — tolerable for a lone contact link on a legal page, but
   these pages run links through their body copy, so they are body text and
   have to clear the floor. --wa-green-deeper (var(--wa-green-deeper)) is the same brand
   ramp, one stop down, and measures 7.33:1. Dark mode keeps --wa-green,
   which is already far above the floor on the near-black background.

   NG5 accessibility closure (audit A2): this rule is scoped to PROSE links.
   Unscoped, `.solution-wrap a` (0,1,1) outranked `.btn-primary` (0,1,0) and
   recoloured the "ابدأ التجربة المجانية" button's label to the link colour:
   var(--wa-green-deeper) on the green button measured 3.87:1 in light and — because the
   dark rule below set the label to the SAME green as the button — 1.00:1 in
   dark. That silently re-introduced the exact failure style.css's
   `.btn-primary` comment records as "the single most widespread contrast
   failure in the product". A button is not a body-copy link; it keeps its
   own label colour. */
.solution-wrap a:not(.btn) { color: var(--wa-green-deeper); font-weight: 600; }
body.dark-mode .solution-wrap a:not(.btn) { color: var(--wa-green); }

/* ── Callout: the honest-limitation box.
   Used wherever a page has to say "this is what we do NOT do". It is styled
   as a plain neutral card rather than a warning so that stating a limit
   reads as information, not as an error state. ── */
.solution-note {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-inline-start: 3px solid var(--wa-green-dark);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin: 20px 0;
}
.solution-note p:last-child { margin-bottom: 0; }
.solution-note-title {
    font-weight: 700;
    color: var(--text-main);
    display: block;
    margin-bottom: 6px;
}

/* ── Comparison table ── */
.solution-table-scroll { overflow-x: auto; margin: 16px 0 20px; }
.solution-table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.solution-table th,
.solution-table td {
    border: 1px solid var(--border-color);
    padding: 11px 13px;
    text-align: start;
    vertical-align: top;
    line-height: 1.85;
}
.solution-table th {
    /* Not var(--bg-chat): in dark mode that token resolves to the same
       #070A0F as --bg-main, so the header row became invisible against the
       page and the table lost its heading. A translucent brand tint reads as
       a distinct band over both themes' backgrounds — same technique the
       product already uses for .about-card-icon — while --text-main keeps
       its full contrast on either. */
    background: rgba(var(--wa-green-rgb), 0.10);
    color: var(--text-main);
    font-weight: 700;
}
.solution-table td { color: var(--text-muted); }

/* ── FAQ (plain <details>: real, crawlable, no JS) ── */
.solution-faq details {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 10px;
    background: var(--bg-card);
}
.solution-faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.8;
}
.solution-faq summary::marker { color: var(--wa-green-dark); }
.solution-faq details > p { margin: 10px 0 2px; }

/* ── Closing CTA ── */
.solution-cta {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 28px 26px;
    margin-top: 48px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.solution-cta h2 { justify-content: center; }
.solution-cta-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 18px;
}

/* ── Related-pages block (the internal-link architecture) ── */
.solution-related { margin-top: 44px; }
.solution-related h2 { font-size: var(--fs-lg); }
.solution-related ul { list-style: none; padding: 0; }
.solution-related li { margin-bottom: 8px; }

/* ── Footer solutions column (also used on index.html/about.html) ── */
.footer-solution-links {
    margin-top: 14px;
    display: flex;
    gap: 8px 18px;
    justify-content: center;
    flex-wrap: wrap;
}
/* NG5 (WCAG 2.5.8): footer links measured 47×21 — a navigation list, so not
   exempt as inline text. Vertical padding alone lifts them to ≥24px; the row
   still wraps exactly as before because only the box grew, not the text. */
.footer-solution-links a,
.footer-legal-links a {
    color: inherit;
    opacity: .75;
    font-size: var(--fs-sm);
    text-decoration: none;
    display: inline-block;
    padding: 4px 2px;
    min-height: 24px;
}
.footer-solution-links a:hover,
.footer-legal-links a:hover { opacity: 1; text-decoration: underline; }
@media (pointer: coarse) {
    .solution-crumbs a,
    .footer-solution-links a,
    .footer-legal-links a { min-height: 44px; padding-block: 12px; }
}

@media (max-width: 600px) {
    .solution-wrap { padding-top: 108px; }
}