/* TestPrêt coming-soon site (W1). Plain CSS, no build step.
   Everything under /assets/ is cached for a year (see _headers): when a file's content changes, give it a new
   name (site.v1.css -> site.v2.css) and update the links in every page.
   Layout uses logical properties (inline/block) so a page with dir="rtl" mirrors without extra rules. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+0178, U+2010-2026, U+202F, U+2039-203A, U+20AC, U+2122;
}

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+0178, U+2010-2026, U+202F, U+2039-203A, U+20AC, U+2122;
}

/* Colours: the app's tokens (ui/theme/Tokens.kt and the dark palette in Palette.kt). */
:root {
  color-scheme: light dark;
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --ink: #0F1B2D;
  --text-2: #3E4757;
  --muted: #5A6475;
  --outline: #D5DAE4;
  --primary: #2340D8;
  --primary-hover: #1A31A8;
  --pret: #2340D8;
  --dot: #FF7A50;
  --focus: #2340D8;
  --mark-ring: transparent;
  --art-bg: #0F1B2D;
  --art-outline: #0F1B2D;
  --art-chevron: #5B8CFF;
  --font-display: "Bricolage Grotesque", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --track-display: -0.02em;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1220;
    --surface: #141C2B;
    --ink: #E8ECF4;
    --text-2: #C3CAD8;
    --muted: #A3ADBF;
    --outline: #2C3850;
    --primary: #7C95FF;
    --primary-hover: #B9C6FF;
    --pret: #9DB0FF;
    --focus: #9DB0FF;
    --mark-ring: #2C3850;
    --art-bg: #1B2537;
    --art-outline: #2C3850;
    --art-chevron: #7C95FF;
  }
}

/* Scripts the Latin fonts do not cover (fa, ar, zh, hi when they are published) use the system fonts and no
   negative tracking. */
:lang(fa), :lang(ar), :lang(zh), :lang(hi) {
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --track-display: 0;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--primary);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover { color: var(--primary-hover); text-decoration-thickness: 0.14em; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 10;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }
.skip-link:hover { color: var(--bg); }

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Header: brand on one side, language switcher on the other; wraps under the brand when space runs out. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.75rem;
  color: var(--ink);
  text-decoration: none;
}

.brand:hover { color: var(--ink); }

.brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 24%;
  box-shadow: 0 0 0 1px var(--mark-ring);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1;
  white-space: nowrap;
}

.wordmark-pret { color: var(--pret); }

.lang-switch ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.25rem 0.875rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}

.lang-switch a:hover { text-decoration: underline; }

.lang-switch a[aria-current="page"] {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--outline);
  color: var(--ink);
}

/* Main content */
main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 4rem);
  padding-block: clamp(2rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4rem);
}

main:focus { outline: none; }

.hero {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.hero-text { max-width: 40rem; }

h1 {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.25rem);
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1.04;
  text-wrap: balance;
}

.lede {
  max-width: 36em;
  margin: 0 0 2rem;
  color: var(--text-2);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  text-wrap: pretty;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.meta p { margin: 0; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--outline);
  font-weight: 600;
}

.status-dot {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  fill: var(--dot);
}

.contact {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.contact a { overflow-wrap: anywhere; }

.icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.contact .icon { color: var(--muted); }

.note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 46rem;
  margin: 0;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--outline);
  color: var(--text-2);
  font-size: 0.9375rem;
}

.note .icon {
  margin-block-start: 0.1em;
  color: var(--primary);
}

/* Decorative art (wide screens only): the logo's guillemets inside a timer ring, over a voice waveform. */
.hero-art { display: none; }

.art {
  width: 100%;
  max-width: 26rem;
  height: auto;
  margin-inline-start: auto;
}

.art-card { fill: var(--art-bg); stroke: var(--art-outline); stroke-width: 2; }
.art-track { fill: none; stroke: rgb(255 255 255 / 0.1); stroke-width: 10; }
.art-arc { fill: none; stroke: var(--art-chevron); stroke-linecap: round; stroke-width: 10; }
.art-chevron-1, .art-chevron-2 { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 9; }
.art-chevron-1 { stroke: #FFFFFF; }
.art-chevron-2 { stroke: var(--art-chevron); }
.art-dot { fill: var(--dot); }
.art-bar { fill: var(--art-chevron); opacity: 0.45; }

@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; }
  .hero-art { display: block; }
}

/* Footer */
.site-footer {
  padding-block: 1.5rem 2rem;
  border-block-start: 1px solid var(--outline);
  color: var(--muted);
  font-size: 0.875rem;
}

.site-footer p { max-width: 60rem; margin: 0; }
.site-footer p + p { margin-block-start: 0.75rem; }

/* Language chooser (/index.html) and the 404 page */
.center {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding-block: 3rem;
  text-align: center;
}

.center-mark { width: 4.5rem; height: 4.5rem; border-radius: 24%; box-shadow: 0 0 0 1px var(--mark-ring); }
.center .wordmark { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.center h1 { margin: 0; font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); }
.center p { margin: 0; color: var(--text-2); }
.h1-alt { display: block; margin-block-start: 0.35rem; color: var(--muted); font-size: 0.6em; }

.choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.choices a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10rem;
  min-height: 3rem;
  padding: 0.5rem 1.5rem;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--outline);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}

.choices a:hover { text-decoration: underline; }