/* Kawaro site, base layer. Light only. Every colour, length and duration comes
   from tokens.css (the site block of design/tokens.json). Every corner is square:
   shapes come from clip-path polygons, edges are drawn as inset polygons, and
   there are no shadows, no gradients and no one-sided borders. Logical
   properties only, so the page mirrors for right to left.

   Motion language: one curve (--ease-out), three durations from the tokens.
   Content is visible by default; animation only enhances it. */

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

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

:root {
  --fs-h1: var(--type-h1);
  --fs-h2: var(--type-h2);
  --fs-h3: var(--type-h3);
  --fs-lead: var(--type-lead);
  --fs-body: var(--type-body);
  --fs-display: clamp(var(--type-display-sm), 11vw, var(--type-display));
  --dir: 1;
  --hexagon: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
[dir="rtl"] { --dir: -1; }
/* S-064: home section headings at headline size, without the hexagon mark. */
body.home { --head-size: var(--fs-h1); --head-mark: none; }
@media (max-width: 719px) {
  :root {
    --fs-h1: var(--type-h1-sm);
    --fs-h2: var(--type-h2-sm);
    --fs-h3: var(--type-h3-sm);
    --fs-lead: var(--type-lead-sm);
    --fs-body: var(--type-body-sm);
  }
}

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

body {
  margin: 0;
  background: var(--color-surface-0);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: clip;
}
body:lang(ar) { line-height: 1.75; }

a {
  color: inherit;
  text-decoration-thickness: var(--border-default);
  text-underline-offset: var(--space-1);
}

:focus-visible {
  outline: var(--border-ring) solid var(--color-ink);
  outline-offset: var(--space-1);
}

code, pre { font-family: ui-monospace, "IBM Plex Mono", monospace; font-size: var(--type-small); }
code { direction: ltr; unicode-bidi: isolate; }
:not(pre) > code { white-space: nowrap; }

.sr-only {
  position: absolute;
  width: var(--space-1);
  height: var(--space-1);
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  position: relative;
  width: 100%;
  max-width: calc(var(--space-10) * 10);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 720px) { .wrap { padding-inline: var(--space-6); } }

.skip {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: calc(var(--space-10) * -2);
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding-inline: var(--space-5);
  background: var(--color-ink);
  color: var(--color-paper);
  z-index: 50;
}
.skip:focus { inset-block-start: var(--space-4); }

/* Type */
h1, h2, h3 { font-weight: var(--font-weight-semibold); margin: 0; text-wrap: balance; }
h1, h2 { font-weight: var(--font-weight-bold); }
body:lang(en) h1, body:lang(en) h2 { letter-spacing: calc(var(--border-default) * -1); }
h1 { font-size: var(--fs-h1); line-height: 1.1; }
h2 { font-size: var(--fs-h2); line-height: 1.12; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
body:lang(ar) h1 { line-height: 1.3; }
body:lang(ar) h2 { line-height: 1.3; }
.lead { margin: var(--space-5) 0 0; font-size: var(--fs-lead); max-width: 24ch; }
.fine { color: var(--color-text-secondary); margin: var(--space-4) 0 0; }
.fine-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding: 0; list-style: none; }
.fine-links li { margin: 0; }
.fine-links a { display: inline-flex; align-items: center; min-height: var(--target-min); }
.muted { color: var(--color-text-secondary); }
.hl { display: inline-block; line-height: 1.05; background: var(--color-accent); color: var(--color-accent-ink); padding-inline: var(--space-2); }
body:lang(ar) .hl { line-height: 1.3; }

/* Sections. Each pins its own surface. Vertical room comes from the section
   padding and from the heading block, never from a hidden height. */
.sec {
  position: relative;
  background: var(--color-surface-0);
  padding-block: var(--space-7);
  overflow-x: clip;
}
@media (min-width: 720px) { .sec { padding-block: var(--space-9); } }
.sec.alt { background: var(--color-surface-1); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-block-start: var(--space-6); }

/* Support: the owner's badge in the Sbarah theme. Only --sbarah-* tokens here. */
.s-support { background: var(--sbarah-bg); color: var(--sbarah-text); }
.s-support :focus-visible { outline-color: var(--sbarah-accent); }
.s-support .support-badge { display: block; width: fit-content; max-width: 100%; }
.support-badge img { display: block; width: calc(var(--space-10) * 4); max-width: 100%; height: auto; }