/* The shared style sheet of the app's public pages: the landing page, the
   privacy policy and the support page, in English and Arabic.

   Rules for this file:
   - System fonts only. No url(), no @import, no @font-face: the pages'
     Content-Security-Policy allows styles and images from this host only,
     and the pages load nothing from another host.
   - Logical properties only (margin-inline, padding-block, inset-inline-start,
     text-align: start), so the Arabic pages flip right to left. Decision 245.
   - Every text colour pair in :root meets WCAG AA, 4.5 to 1, in the light and
     the dark scheme. verify/test-site-pages.mjs computes the ratios from the
     values below, so a new colour is checked the day it is written. */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --surface: #f4f5f7;
  --text: #1f2328;
  --muted: #555e68;
  --link: #0a55b8;
  --border: #d0d7de;
  /* The landing page's picture. Shapes only, never text, so the 4.5 to 1
     rule does not apply; the arrow and the lifted tile's outline keep 3 to 1
     against --bg (WCAG 1.4.11). */
  --art-top: #e8eefb;
  --art-card: #e3e7ec;
  --art-img: #c9d0d8;
  --art-line: #b3bcc6;
  --art-selling: #c5e3ff;
  --art-selling-ink: #00527c;
  --art-new: #ffd79d;
  --art-new-ink: #5e4200;
  --art-turn: #0c5132;
  --art-empty: #8c959f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15181c;
    --surface: #1f2329;
    --text: #e8eaed;
    --muted: #aab2bc;
    --link: #8cb8ff;
    --border: #3a414a;
    --art-top: #1d2738;
    --art-card: #2a3038;
    --art-img: #3a424c;
    --art-line: #4b545f;
    --art-selling: #c5e3ff;
    --art-selling-ink: #00527c;
    --art-new: #ffd79d;
    --art-new-ink: #5e4200;
    --art-turn: #5fd39a;
    --art-empty: #6e7781;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

html[lang="ar"] body {
  font-size: 1.125rem;
  line-height: 1.8;
}

.skip-link {
  position: absolute;
  inset-inline-start: 0.5rem;
  inset-block-start: -4rem;
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  background: var(--bg);
  color: var(--link);
  border: 2px solid var(--link);
  border-radius: 4px;
  z-index: 1;
}

.skip-link:focus {
  inset-block-start: 0.5rem;
}

.site-header,
main,
.site-footer {
  max-inline-size: 46rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.25rem;
  border-block-end: 1px solid var(--border);
}

.brand {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.brand a {
  color: var(--text);
  text-decoration: none;
}

main {
  display: block;
  padding-block: 1.5rem 3rem;
}

h1 {
  margin-block: 0.5rem 0.75rem;
  font-size: 1.875rem;
  line-height: 1.25;
}

h2 {
  margin-block: 2.25rem 0.75rem;
  font-size: 1.375rem;
  line-height: 1.3;
}

h3 {
  margin-block: 1.5rem 0.5rem;
  font-size: 1.125rem;
  line-height: 1.4;
}

p,
ul,
ol,
table {
  margin-block: 0 1rem;
}

ul,
ol {
  padding-inline-start: 1.5rem;
}

li + li {
  margin-block-start: 0.375rem;
}

a {
  color: var(--link);
  text-underline-offset: 0.15em;
}

a:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Smaller text is set in em, not rem, so it follows the page's body size:
   the Arabic pages have a larger body size (html[lang="ar"] body). */
.meta {
  color: var(--muted);
  font-size: 0.875em;
}

.note {
  margin-block: 0 1rem;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  background: var(--surface);
  border-inline-start: 4px solid var(--border);
}

.note p:last-child {
  margin-block-end: 0;
}

.contents ul {
  columns: 2 14rem;
}

.table-wrap {
  margin-block: 0 1rem;
  overflow-x: auto;
}

.table-wrap table {
  margin-block-end: 0;
}

table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.875em;
}

th,
td {
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--border);
}

th {
  background: var(--surface);
}

code {
  padding-inline: 0.25em;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 0.9em;
  background: var(--surface);
  border-radius: 3px;
  overflow-wrap: anywhere;
}

.site-footer {
  padding-block: 1.25rem 2rem;
  color: var(--muted);
  font-size: 0.875em;
  border-block-start: 1px solid var(--border);
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

.site-footer li + li {
  margin-block-start: 0;
}

/* --- The landing page: / and /ar ---------------------------------------- */

.landing .site-header,
.landing main,
.landing .site-footer {
  max-inline-size: 68rem;
}

.landing main {
  padding-block: 0 2rem;
}

/* One reading width for the prose, the table and the note. On a wide screen
   the problem list and the note use two columns, so the text sections fill
   about the same width as the cards between them. */
.landing .block > p,
.landing .block > ul,
.landing .block > .note,
.landing .faq > h3,
.landing .faq > p,
.landing .table-wrap {
  max-inline-size: 52rem;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 3rem;
  align-items: center;
  padding-block: 2rem 2.5rem;
  border-block-end: 1px solid var(--border);
}

.hero h1 {
  margin-block: 0 1rem;
  font-size: 2.75rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

html[lang="ar"] .hero h1 {
  line-height: 1.35;
  letter-spacing: 0;
}

.lead {
  font-size: 1.1875rem;
}

/* "Coming soon" is a status label, not a button: it cannot be clicked. The one
   button is "Write to us" (.button). */
.soon {
  display: inline-block;
  margin-block: 0.25rem 1rem;
  padding-block: 0.25rem;
  padding-inline: 0.625rem;
  color: var(--muted);
  font-size: 0.875em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.button {
  display: inline-block;
  padding-block: 0.625rem;
  padding-inline: 1.25rem;
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  background: var(--text);
  border-radius: 6px;
}

/* An example address such as your-store.myshopify.com. A phone would break it
   at the hyphen, and in Arabic the first half then reads as "your-". */
.nobreak {
  white-space: nowrap;
}

.button:hover {
  text-decoration: underline;
}

.action-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
  font-weight: 600;
}

.action-links li + li {
  margin-block-start: 0;
}

.hero-art svg {
  display: block;
  inline-size: 100%;
  max-inline-size: 27rem;
  block-size: auto;
  margin-inline: auto;
}

/* The picture has no text, so it flips with the page: the arrow stays on the
   side where the line of text ends. */
html[dir="rtl"] .hero-art svg {
  transform: scaleX(-1);
}

.art-top { fill: var(--art-top); }
.art-card { fill: var(--art-card); }
.art-img { fill: var(--art-img); }
.art-line { fill: var(--art-line); }
.art-mid { opacity: 0.8; }
.art-low { opacity: 0.6; }
.art-lower { opacity: 0.4; }
/* Decision 616: the lanes' cards use the app's own tag colours and icons,
   public/app.css .tablet-photo and .tablet-icon. A card that rose stays gray
   with a green outline: it is seen, not changed, decision 608. */
.art-selling .art-card { fill: var(--art-selling); }
.art-new .art-card { fill: var(--art-new); }
.art-turn .art-card { fill: var(--art-card); stroke: var(--art-turn); stroke-width: 2.5; }
.art-icon { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.art-selling .art-icon { stroke: var(--art-selling-ink); }
.art-new .art-icon { stroke: var(--art-new-ink); }
.art-turn .art-icon { stroke: var(--art-turn); }
.art-selling .art-line { fill: var(--art-selling-ink); opacity: 0.45; }
.art-new .art-line { fill: var(--art-new-ink); opacity: 0.45; }
.art-empty { fill: none; stroke: var(--art-empty); stroke-width: 2; stroke-dasharray: 6 5; }
.art-halo { fill: none; stroke: var(--bg); stroke-width: 9; stroke-linecap: round; }
.art-arrow { fill: none; stroke: var(--art-turn); stroke-width: 3.5; stroke-linecap: round; }
.art-head { fill: var(--art-turn); }

.art-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem 1.25rem;
  margin-block: 0.75rem 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--muted);
}

.art-legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.art-key {
  display: inline-block;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  border-radius: 3px;
}

.art-key-selling { background: var(--art-selling); box-shadow: inset 0 0 0 1.5px var(--art-selling-ink); }
.art-key-new { background: var(--art-new); box-shadow: inset 0 0 0 1.5px var(--art-new-ink); }
.art-key-turn { background: var(--art-card); box-shadow: inset 0 0 0 2px var(--art-turn); }

.block {
  padding-block: 0.5rem 1.5rem;
  border-block-end: 1px solid var(--border);
}

.block > h2,
.closing > h2 {
  margin-block-start: 2rem;
}

.steps {
  display: grid;
  gap: 1rem;
  margin-block: 0 1.25rem;
  padding-inline-start: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  margin-block-start: 0;
  padding-block: 1rem;
  padding-inline: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  counter-increment: step;
}

.steps > li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin-block-end: 0.5rem;
  font-weight: 700;
  color: var(--bg);
  background: var(--text);
  border-radius: 50%;
}

.steps strong {
  display: block;
  margin-block-end: 0.25rem;
}

.cards {
  display: grid;
  gap: 1rem;
  padding-block: 2rem;
  border-block-end: 1px solid var(--border);
}

.card {
  padding-block: 1.25rem 0.25rem;
  padding-inline: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.card h2 {
  margin-block: 0 0.5rem;
  font-size: 1.125rem;
  line-height: 1.4;
}

.faq h3 {
  margin-block-start: 1.25rem;
}

.faq .more {
  margin-block-start: 1.5rem;
  font-weight: 600;
}

.closing {
  margin-block: 2.5rem 0;
  padding-block: 0.5rem 2rem;
  padding-inline: 1.25rem;
  text-align: center;
  background: var(--surface);
  border-radius: 12px;
}

.closing .action-links {
  justify-content: center;
}

.footer-contact,
.footer-copy {
  margin-block: 0.75rem 0;
}

@media (min-width: 40rem) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 56rem) {
  .hero {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    padding-block: 4rem;
  }

  .hero h1 {
    font-size: 3.25rem;
  }

  .steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .steps-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .landing .block > ul {
    max-inline-size: none;
    columns: 2;
    column-gap: 3rem;
  }

  .landing .block > ul > li {
    break-inside: avoid;
  }

  .landing .block > .note {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 3rem;
    max-inline-size: none;
  }

  .landing .block > .note p {
    margin-block: 0;
  }
}

@media (max-width: 30rem) {
  body {
    font-size: 1rem;
  }

  html[lang="ar"] body {
    font-size: 1.0625rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  /* After the h1 rule: .hero h1 wins by specificity anyway. */
  .hero h1 {
    font-size: 2.125rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  th,
  td {
    padding-inline: 0.5rem;
  }

  /* On a phone, a table with class="stack" shows each row as a block: the
     first cell is the row's heading, and each other cell starts with its
     column's name, from its data-label attribute. */
  .stack thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .stack,
  .stack tbody,
  .stack tr,
  .stack td {
    display: block;
  }

  .stack tr {
    padding-block: 0.625rem;
    border-block-end: 1px solid var(--border);
  }

  .stack td {
    padding-block: 0.125rem;
    padding-inline: 0;
    border: 0;
  }

  .stack td:first-child {
    font-weight: 700;
  }

  .stack td + td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 0.875em;
    font-weight: 600;
  }
}