/*
 * Khadamati — public site.
 *
 * Hand-written on purpose. The Dockerfile carries no node and no build step
 * (an inherited Vite stage was deleted when it turned out to be building an
 * Inertia app no route rendered), and a public surface of five pages does not
 * justify putting that failure surface back into the deploy path.
 *
 * Two rules hold the whole file together:
 *
 *   1. LOGICAL PROPERTIES ONLY — margin-inline, padding-inline, inset-inline,
 *      border-inline, text-align: start/end. No `left`, no `right`. Arabic and
 *      French then share one stylesheet and `dir` on <html> flips everything.
 *      A single `margin-left` would break RTL silently, on one element.
 *
 *   2. MOBILE FIRST — the base rules are the phone. Wider screens are additions
 *      inside min-width queries, never corrections. Most of Taza will meet this
 *      site on a phone, over a network that is not fast.
 *
 * Two visual registers, decided 2026-09-13:
 *
 *   HOME — "الشبّاك": warm, one loud pair of doors, price visible early, and a
 *   WhatsApp button that follows the thumb. It sells a person you can reach.
 *
 *   SERVICES — "اللائحة": a tariff board. Name, price, delay, in a table, with
 *   figures that line up. It sells the thing a Moroccan buyer distrusts least:
 *   a posted price they can read before they commit to anything.
 */

/* ----------------------------------------------------------------- fonts -- */
/*
 * Self-hosted, and that is a legal decision before it is a performance one:
 * loading these from Google would send every visitor's IP address to a third
 * party, which is a transfer we have not declared to the CNDP and cannot
 * justify for a typeface. 8–10 KB per weight; the Arabic subset is all most
 * visitors ever fetch. font-display: swap so text is readable before the font
 * lands on a slow connection.
 */
@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/tajawal-arabic-400-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/tajawal-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/tajawal-arabic-500-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/tajawal-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/tajawal-arabic-700-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/tajawal-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/tajawal-arabic-800-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/tajawal-latin-800-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens -- */
:root {
    --ink:          #14261f;
    --ink-soft:     #4a5d55;
    --ink-faint:    #7a8a84;
    --paper:        #ffffff;
    --paper-tint:   #f4f7f5;
    --paper-warm:   #fbf8f2;
    --line:         #dde5e1;
    --line-warm:    #ece4d6;

    --brand:        #0f6b4f;
    --brand-dark:   #0a4d39;
    --brand-tint:   #e6f2ed;

    /* The accent that carries prices. Deliberately not the brand green: a price
       must be findable in one glance without reading, and a second green would
       melt into the first. */
    --gold:         #8a5a00;
    --gold-strong:  #c98a1e;

    --warn:         #8a5a00;
    --warn-tint:    #fdf4e3;

    /* WhatsApp's own green. Used for exactly one thing — the button that opens
       WhatsApp — so the colour is a promise about where the tap leads. */
    --wa:           #1fa855;
    --wa-dark:      #178744;

    --radius:       10px;
    --radius-lg:    14px;
    --wrap:         64rem;

    --shadow:       0 1px 2px rgba(20, 38, 31, .06), 0 10px 24px -14px rgba(20, 38, 31, .28);

    /* Arabic first in the stack. A Latin-first stack renders Arabic in a
       fallback the reader notices immediately as "not quite right". */
    --font: "Tajawal", "Noto Kufi Arabic", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink);
    background: var(--paper);
}

h1, h2, h3 { line-height: 1.3; margin-block: 0 0.5em; font-weight: 700; text-wrap: balance; }
h1 { font-size: 1.75rem; letter-spacing: -0.015em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.0625rem; }
p  { margin-block: 0 1em; }

a { color: var(--brand-dark); }
a:hover { color: var(--brand); }

/* Visible focus is not decoration: it is the only way a keyboard user knows
   where they are. Never remove it without replacing it. */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }

.skip {
    position: absolute;
    inset-inline-start: -9999px;
}
.skip:focus {
    inset-inline-start: 1rem;
    inset-block-start: 1rem;
    position: fixed;
    z-index: 10;
    background: var(--paper);
    padding: 0.6rem 1rem;
    border: 2px solid var(--brand);
    border-radius: var(--radius);
}

/* ---------------------------------------------------------------- header -- */
.site-header {
    border-block-end: 1px solid var(--line);
    background: var(--paper);
}
.header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 0.9rem;
}
.brand {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--brand-dark);
    text-decoration: none;
    letter-spacing: -0.02em;
}
/* The city, not a slogan. "Taza" is the single most useful word in the header
   for a visitor deciding whether this site is about them. */
.brand-place {
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--ink-faint);
    margin-inline-start: 0.55rem;
    padding-inline-start: 0.55rem;
    border-inline-start: 1px solid var(--line);
}
.nav { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.nav a { text-decoration: none; color: var(--ink-soft); }
.nav a:hover { color: var(--brand-dark); }
.nav .lang {
    color: var(--brand-dark);
    font-weight: 600;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding-inline: 0.7rem;
    padding-block: 0.15rem;
}

/* ------------------------------------------------------------------ hero -- */
.hero { background: var(--brand-tint); padding-block: 2.5rem 2rem; }
.hero h1 { max-width: 34ch; }
.hero .lead { max-width: 56ch; color: var(--ink-soft); margin-block-end: 0; }

/* The homepage hero is warm rather than tinted green, and it holds the doors
   instead of introducing them: the first decision is "which of these am I",
   and making a visitor scroll to reach it loses the ones who came from a
   WhatsApp link and are standing in a queue. */
.hero--home {
    background: var(--paper-warm);
    border-block-end: 1px solid var(--line-warm);
    padding-block: 1.75rem 1.5rem;
}
.hero--home h1 { font-size: 1.9rem; font-weight: 800; max-width: 22ch; }
.hero--home .lead { margin-block-end: 1.35rem; }

.hero-pin {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--brand-tint);
    color: var(--brand-dark);
    padding-block: 0.3rem;
    padding-inline: 0.75rem;
    border-radius: 999px;
    margin-block-end: 0.9rem;
}

@media (min-width: 40rem) {
    .hero--home h1 { font-size: 2.4rem; }
}

/* ------------------------------------------------------------------ media -- */
/* Rendered only when an administrator has set `site.hero_image`. No dashed
   placeholder ships to production: an empty frame saying "photo here" reads as
   an unfinished site, which is the opposite of what the photo is for. */
.hero-media {
    margin-block-start: 1.35rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line-warm);
    background: var(--paper);
}
.hero-media img { display: block; width: 100%; height: auto; }
.hero-media figcaption {
    font-size: 0.85rem;
    color: var(--ink-faint);
    padding: 0.6rem 0.9rem;
    border-block-start: 1px solid var(--line-warm);
}

/* ----------------------------------------------------------------- doors -- */
/* The four entry points. One column on a phone — a 2×2 grid at 360px makes
   four unreadable boxes and the visitor picks none of them. */
.doors {
    display: grid;
    gap: 0.875rem;
    grid-template-columns: 1fr;
    padding-block: 2rem;
}
.door {
    display: block;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    text-decoration: none;
    color: inherit;
    /* Border on the leading edge, so it is the right side in Arabic and the
       left in French without a second rule. */
    border-inline-start: 4px solid var(--brand);
}
.door:hover { border-color: var(--brand); background: var(--paper-tint); }
.door h2 { margin-block-end: 0.25rem; color: var(--brand-dark); }
.door p  { margin-block-end: 0; color: var(--ink-soft); font-size: 0.97rem; }
.door .count { display: block; margin-block-start: 0.4rem; font-size: 0.85rem; color: var(--ink-faint); }

/* The "I don't know what I need" door is the one the founder brief singled
   out, so it is styled as an equal, not as a fallback link at the bottom. */
.door--unsure { border-inline-start-color: var(--warn); background: var(--warn-tint); }
.door--unsure h2 { color: var(--warn); }

/*
 | The homepage pair. Two doors carry almost all the traffic — a citizen and a
 | company — and the other two are real but rarer. Giving all four the same
 | weight is what a menu does; this page has to make a choice easy instead.
 */
.doors--home { padding-block: 0; gap: 0.75rem; }
.door--big {
    display: flex;
    /* Aligned to the heading, not centred on the block: a centred icon floats
       opposite the second line of the hint and reads as unrelated to the title
       it belongs to. */
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-lg);
    border-inline-start-width: 1px;
    box-shadow: var(--shadow);
}
.door--big h2 { font-size: 1.1rem; margin-block-end: 0.1rem; }
.door--big p { font-size: 0.9rem; line-height: 1.5; }
.door--big .count { margin-block-start: 0.2rem; }
/* `flex: 1` and not only `min-width: 0`: without the grow the span is sized by
   its content, the long hint overflows its own box, and the text runs over the
   icon instead of beside it. */
.door--big .door-text { flex: 1 1 auto; min-width: 0; }

/* The first door is filled, not outlined. One loud thing per screen. */
.door--lead { background: var(--brand); border-color: var(--brand); color: var(--paper); }
.door--lead:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.door--lead h2 { color: var(--paper); }
.door--lead p, .door--lead .count { color: #cfe4dc; }

.door-ico {
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
    background: var(--brand-tint);
    color: var(--brand-dark);
    display: grid;
    place-items: center;
}
.door--lead .door-ico { background: rgba(255, 255, 255, .18); color: var(--paper); }
.door-ico svg { width: 1.35rem; height: 1.35rem; }

/* The two quieter doors, side by side even on a phone: they are short enough
   to stay legible at half width, and keeping them on one row says plainly that
   they matter less than the pair above. */
.doors--thin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-block-start: 0.75rem;
}
.door--thin {
    border: 1px dashed var(--line-warm);
    border-radius: var(--radius);
    background: var(--paper);
    padding: 0.7rem 0.8rem;
    text-align: center;
    text-decoration: none;
    color: var(--ink-soft);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
    display: grid;
    place-items: center;
    min-height: 44px;
}
.door--thin:hover { border-color: var(--brand); color: var(--brand-dark); }

@media (min-width: 40rem) {
    .doors { grid-template-columns: 1fr 1fr; }
    .doors--home { grid-template-columns: 1fr 1fr; }
    h1 { font-size: 2.1rem; }
}

/* ----------------------------------------------------------------- trust -- */
/*
 | Three promises, stated before anything is asked. Each one is a thing the
 | catalogue already enforces — a posted price, a review before filing, a file
 | that is kept — so none of them is marketing.
 */
.trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--paper);
    border-block-end: 1px solid var(--line);
}
.trust div {
    padding: 0.85rem 0.4rem;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ink-soft);
}
.trust div + div { border-inline-start: 1px solid var(--line); }
.trust b { display: block; color: var(--brand-dark); font-size: 0.92rem; }

/* ---------------------------------------------------------------- cards --- */
.section { padding-block: 2rem; }
.section--tight { padding-block: 1.5rem; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head h2 { margin-block-end: 0.25rem; }
.section-head a { font-size: 0.92rem; font-weight: 600; text-decoration: none; }
.section-sub { color: var(--ink-faint); font-size: 0.92rem; margin-block: 0 1rem; }

.cards { display: grid; gap: 0.875rem; grid-template-columns: 1fr; padding: 0; margin: 0; list-style: none; }

@media (min-width: 46rem) {
    .cards { grid-template-columns: 1fr 1fr; }
}

.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.card h3 { margin: 0; }
.card h3 a { text-decoration: none; }
.card p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    margin-block-start: auto;
    padding-block-start: 0.5rem;
    font-size: 0.9rem;
    color: var(--ink-faint);
}

.price { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
/* Latin digits and the currency read left-to-right even inside Arabic text. */
.price, .num { unicode-bidi: isolate; }

/* A price on the homepage is a chip, because it has to be found without being
   read. Elsewhere it stays plain text inside a sentence. */
.chip {
    display: inline-block;
    font-weight: 700;
    font-size: 0.92rem;
    padding-block: 0.25rem;
    padding-inline: 0.6rem;
    border-radius: 8px;
    background: var(--brand-tint);
    color: var(--brand-dark);
    unicode-bidi: isolate;
}
.chip--time { background: var(--warn-tint); color: var(--gold); }
.chip .price { font-size: inherit; color: inherit; font-weight: inherit; }
.chip .badge { border: 0; background: none; padding: 0; font-size: inherit; color: inherit; }

/* ---------------------------------------------------------------- badges -- */
.badge {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    line-height: 1.6;
    background: var(--paper-tint);
    color: var(--ink-soft);
    border: 1px solid var(--line);
}
.badge--free { background: var(--brand-tint); color: var(--brand-dark); border-color: transparent; }
.badge--quote { background: var(--warn-tint); color: var(--warn); border-color: transparent; }

/* --------------------------------------------------------------- tariff --- */
/*
 | The services page, in one object: a posted tariff.
 |
 | Cards were hiding the two figures a visitor actually compares. A table puts
 | them in columns that line up, which is the whole point — tabular-nums keeps
 | 80 and 400 the same width so the eye can scan a price list without reading
 | it. It survives 360px because it is three narrow columns, and the wrapper
 | scrolls rather than letting the page scroll sideways.
 */
.tariff-scroll { overflow-x: auto; }
.tariff {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.tariff caption {
    text-align: start;
    font-size: 0.85rem;
    color: var(--ink-faint);
    padding-block-end: 0.5rem;
}
.tariff th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
    text-align: start;
    padding-block: 0.5rem;
    border-block-end: 2px solid var(--ink);
}
.tariff td {
    padding-block: 0.85rem;
    border-block-end: 1px solid var(--line);
    vertical-align: top;
}
.tariff .col-n { text-align: end; white-space: nowrap; }
.tariff .t-name { font-weight: 700; line-height: 1.4; padding-inline-end: 0.75rem; }
.tariff .t-name a { text-decoration: none; }
.tariff .t-name small {
    display: block;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin-block-start: 0.2rem;
    line-height: 1.5;
}
.tariff .t-days { font-weight: 600; }
.tariff .t-days span { display: block; font-size: 0.8rem; font-weight: 400; color: var(--ink-faint); }
.tariff tr:hover td { background: var(--paper-tint); }

/* The audience column is useful on a wide screen and noise on a phone. */
.col-audience { display: none; }
@media (min-width: 46rem) {
    .col-audience { display: table-cell; }
}

/* Filters as a segmented row, not a dropdown: three options that are all worth
   seeing, and one of them is always the current page. */
.filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-block: 0 1.25rem; }
.filters a {
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding-block: 0.35rem;
    padding-inline: 0.9rem;
}
.filters a:hover { border-color: var(--brand); color: var(--brand-dark); }
.filters a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--paper); }

/* ----------------------------------------------------------------- steps -- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.9rem; }
.steps li {
    counter-increment: step;
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    font-size: 1rem;
    line-height: 1.65;
}
.steps li::before {
    content: counter(step);
    flex: none;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--brand);
    color: var(--paper);
    font-size: 0.88rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    margin-block-start: 0.15rem;
    unicode-bidi: isolate;
}

/* ----------------------------------------------------------------- notes -- */
.note {
    border: 1px solid var(--line);
    border-inline-start: 4px solid var(--ink-faint);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    background: var(--paper-tint);
    margin-block: 1.25rem;
}
.note p:last-child { margin-block-end: 0; }
.note strong { color: var(--ink); }

/* A YELLOW service carries a legal condition. It is not a footnote: it is the
   reason the service is allowed to exist in this form. */
.note--legal { border-inline-start-color: var(--warn); background: var(--warn-tint); }

/* --------------------------------------------------------------- details -- */
.req-list { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.req-list li {
    padding-block: 0.6rem;
    border-block-end: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
}
.req-list li:last-child { border-block-end: 0; }
.req-help { display: block; width: 100%; font-size: 0.9rem; color: var(--ink-faint); }

.facts { display: grid; gap: 0.75rem; grid-template-columns: 1fr; margin-block: 1.25rem; padding: 0; }
.facts > div { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 1rem; }
.facts dt { font-size: 0.85rem; color: var(--ink-faint); margin: 0; }
.facts dd { margin: 0.15rem 0 0; font-weight: 600; }

@media (min-width: 40rem) {
    .facts { grid-template-columns: repeat(3, 1fr); }
    /* Identity rows on the legal pages: an address in a third of a screen wraps
       into four lines and stops reading as an address. These stay stacked at
       every width, and the rule sits inside the query so it needs no override
       to beat the one above it. */
    .facts--stack { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- actions -- */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block: 1.5rem; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.4rem;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    border: 1px solid transparent;
    /* 44px is the smallest target a thumb hits reliably. */
    min-height: 44px;
}
.btn svg { width: 1.15rem; height: 1.15rem; flex: none; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); color: #fff; }
.btn--quiet { border-color: var(--line); color: var(--ink-soft); background: var(--paper); }
.btn--quiet:hover { border-color: var(--brand); color: var(--brand-dark); }

/* WhatsApp green, and only here. The colour tells the thumb where it lands. */
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-dark); color: #fff; }
.btn--block { width: 100%; }

.back { display: inline-block; margin-block: 1.25rem 0; color: var(--ink-soft); font-size: 0.95rem; }
/* The arrow is direction, so it is drawn here and flipped by `dir`, not typed
   into the template. `←` in an Arabic sentence points forward, which is the
   one thing a back link must not do. */
.back::before { content: "\2190"; margin-inline-end: 0.35rem; }
[dir="rtl"] .back::before { content: "\2192"; }

/* ----------------------------------------------------------------- pro ---- */
/*
 | The professional's page. Two numbers, then two lists that contradict each
 | other on purpose: what we give, and what we refuse to promise. The refusals
 | are styled as an equal section, not as small print — they are the part a
 | professional who has been burned before actually reads.
 */
.shares { display: grid; grid-template-columns: 1fr; gap: 0.875rem; margin-block: 1.25rem; }
@media (min-width: 34rem) { .shares { grid-template-columns: 1fr 1fr; } }

.share {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--brand-tint);
    padding: 1.1rem 1.25rem;
}
.share b {
    display: block;
    font-size: 2.6rem;
    line-height: 1.05;
    font-weight: 800;
    color: var(--brand-dark);
    letter-spacing: -0.03em;
}
.share span { display: block; margin-block-start: 0.2rem; color: var(--ink-soft); font-size: 0.95rem; }

.ticks, .crosses { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.7rem; }
.ticks li, .crosses li { display: flex; gap: 0.7rem; align-items: flex-start; line-height: 1.65; }
.ticks li::before, .crosses li::before {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    margin-block-start: 0.2rem;
}
.ticks li::before   { content: "\2713"; background: var(--brand-tint); color: var(--brand-dark); }
.crosses li::before { content: "\00d7"; background: var(--warn-tint);  color: var(--warn); }

/* ------------------------------------------------------------ the intake -- */
/*
 | The professional's questionnaire, in both of its shapes: the posting form, and
 | the WhatsApp version that stores nothing. Which one renders is a setting, not
 | a stylesheet concern (PublicSiteController::intakeMode), so both have to look
 | finished.
 |
 | Everything is sized for a thumb on a cheap phone: full-width fields, 44px
 | minimum targets, and options that wrap instead of scrolling sideways.
 */
.q-block { margin-block-end: 1.75rem; }

.q-label {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    margin-block-end: 0.5rem;
}
.q-help { display: block; color: var(--ink-faint); font-size: 0.9rem; margin-block-end: 0.6rem; }

.q-input {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    padding: 0.7rem 0.9rem;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
}
.q-input:focus { border-color: var(--brand); }
.q-input--short { max-width: 10rem; }

.q-group {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink-faint);
    margin-block: 1rem 0.5rem;
}

.q-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* The whole chip is the target, not the 13px box inside it. */
.q-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding-block: 0.5rem;
    padding-inline: 0.9rem;
    min-height: 44px;
    background: var(--paper);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.4;
}
.q-option:hover { border-color: var(--brand); }
.q-option input { accent-color: var(--brand); width: 1.05rem; height: 1.05rem; flex: none; }
.q-option:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-dark); }
.q-option:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }

/*
 | The honeypot, kept out of sight without display:none.
 |
 | A field that is display:none is the first thing a modern bot skips, and it is
 | also skipped by a screen reader that would otherwise announce a field nobody
 | should fill. Pushed off-canvas with the logical property so it lands off the
 | correct side in RTL as well.
 */
.q-trap {
    position: absolute;
    inset-inline-start: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Consent reads as a statement, not as one more chip in a row of options. */
.q-consent .q-option {
    border-radius: var(--radius);
    align-items: flex-start;
    padding: 0.9rem 1rem;
    line-height: 1.65;
    font-size: 0.95rem;
}
.q-consent .q-option input { margin-block-start: 0.2rem; }

/*
 | The reference on the confirmation page. It is the only thing the applicant
 | leaves with, it gets read aloud over the phone, and it gets copied by hand
 | onto paper — so it is large, spaced, and always LTR even on an RTL page,
 | because a code is not a sentence.
 */
.ref-code {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--brand-dark);
    background: var(--brand-tint);
    border: 1px dashed var(--brand);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    margin-block: 0.3rem 0.6rem;
    text-align: center;
    user-select: all;
}

/* -------------------------------------------------------------- sticky wa -- */
/*
 | Follows the thumb on a phone and disappears on a wide screen, where a fixed
 | bar over a mostly-empty page is just clutter. `--wa-bar` gives the page
 | bottom padding so the bar never covers the last line of the footer, which is
 | the disclaimer and the one paragraph that must always be readable.
 */
.wa-bar { display: none; }

@media (max-width: 46rem) {
    body:has(.wa-bar) { padding-block-end: 4.75rem; }
    .wa-bar {
        display: block;
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 9;
        padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(8px);
        border-block-start: 1px solid var(--line);
    }
    .wa-bar .btn { width: 100%; }
}

/* ---------------------------------------------------------------- footer -- */
.site-footer {
    margin-block-start: 3rem;
    border-block-start: 1px solid var(--line);
    background: var(--paper-tint);
    padding-block: 1.5rem;
    font-size: 0.92rem;
    color: var(--ink-soft);
}
.footer-claim { font-weight: 600; color: var(--ink); }
.disclaimer { color: var(--ink-soft); max-width: 62ch; }
.footer-meta { color: var(--ink-faint); margin-block-end: 0; }
/* Reserved for the legal pages and the CNDP number. Styled now so the texts
   land in a designed place instead of being appended to the footer later. */
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.88rem; margin-block: 0 0.5rem; }
.footer-legal a { color: var(--ink-soft); }

.empty { color: var(--ink-faint); padding-block: 1.5rem; }

/* ----------------------------------------------------------- preferences -- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
    .site-header, .site-footer, .actions, .skip, .wa-bar { display: none; }
    body { font-size: 11pt; padding-block-end: 0; }
}

/* ---------------------------------------------------------- footer legal -- */
/*
 | Quiet by design. These three links must be present on every page and must
 | not compete with the contact button for attention — a legal link nobody can
 | find is a legal link that was never given, and one shouting at the reader is
 | a site that looks like it is hiding behind its terms.
 */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin-block-start: 0.9rem;
    font-size: 0.88rem;
}
.footer-legal a { color: var(--ink-faint); text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: var(--ink); }