/* Flexora legal site - shared styles.
   English is the default language; the Georgian blocks are revealed by setting
   <html lang="ka">, so the page still reads correctly with JavaScript disabled
   (which is how a policy page ought to behave for a reviewer). */

:root {
  --forest: #0b6e3c;
  --emerald: #12a05c;
  --mint: #53e0a0;
  --ink: #101820;
  --body: #454e59;
  --muted: #6b7683;
  --line: #e6e9ed;
  --bg: #ffffff;
  --soft: #f5f9f6;
  --soft-line: #dcece3;
  --shadow: 0 1px 2px rgba(16, 24, 32, .04), 0 8px 24px rgba(16, 24, 32, .05);
  --accent: var(--forest);

  /* ---- type scale ----------------------------------------------------
     Fixed steps rather than a clamp() invented per heading. Ad-hoc clamps
     were why two headings a screen apart could end up the same size at one
     window width and three steps apart at another: nothing related them.

     Every step carries its own line-height, and none of them go below 1.2.
     Georgian has no Poppins cut and falls back to a system face whose
     descenders sit lower than the Latin ones; a heading set at 1.05, which
     looks tight and expensive in English, simply clips them. */
  --t-hero: clamp(38px, 5.6vw, 62px);
  --t-hero-lh: 1.12;
  --t-h2: clamp(30px, 3.9vw, 44px);
  --t-h2-lh: 1.18;
  --t-h3: 20px;
  --t-h3-lh: 1.35;
  --t-lead: 17.5px;
  --t-body: 15.5px;
  --t-small: 13.5px;
  --t-micro: 11.5px;

  /* ---- spacing rhythm ------------------------------------------------
     One 4px unit, so that a gap anywhere on the page is a multiple of the
     same thing as every other gap. Sections were 92px, cards 26px and rows
     17px, which are three different systems pretending to be one. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---- radii ---------------------------------------------------------
     Nested corners have to differ or the inner one looks wrong against the
     outer: an inset inside a 24px card wants 14px, not another 24px. */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---- elevation -----------------------------------------------------
     Three layers each, because one blur reads as a sticker. A real shadow
     is a tight contact edge, a mid diffusion and a wide ambient pool, and
     the ambient one is what makes a card look like it is above the page
     rather than printed on it. */
  --e-1: 0 1px 2px rgba(16, 24, 32, .05), 0 2px 6px rgba(16, 24, 32, .04);
  --e-2: 0 1px 2px rgba(16, 24, 32, .05), 0 6px 16px rgba(16, 24, 32, .06), 0 20px 40px rgba(16, 24, 32, .05);
  --e-3: 0 2px 4px rgba(16, 24, 32, .06), 0 12px 28px rgba(16, 24, 32, .09), 0 36px 72px rgba(16, 24, 32, .08);
  --e-brand: 0 2px 4px rgba(11, 110, 60, .08), 0 14px 32px rgba(11, 110, 60, .16), 0 32px 64px rgba(11, 110, 60, .10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eaf0ec;
    --body: #a8b5ad;
    --muted: #7d8a82;
    --line: #1f2b25;
    --bg: #0f1519;
    --soft: #141d18;
    --soft-line: #1f3229;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --accent: var(--mint);

    --e-1: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .4);
    --e-2: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .45), 0 20px 40px rgba(0, 0, 0, .4);
    --e-3: 0 2px 4px rgba(0, 0, 0, .55), 0 12px 28px rgba(0, 0, 0, .5), 0 36px 72px rgba(0, 0, 0, .45);
    --e-brand: 0 2px 4px rgba(0, 0, 0, .5), 0 14px 32px rgba(0, 0, 0, .45), 0 32px 64px rgba(18, 160, 92, .12);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- language switching ---------- */

/* !important throughout, which is not decoration here. An attribute selector
   is weaker than class-plus-element, so a component rule like
   `.row strong { display: block }` outranked `[data-lang="ka"]` and put the
   Georgian titles back on an English page. Whether a block belongs to the
   language being read is not something a component rule gets a say in. */
[data-lang="ka"] { display: none !important; }
html[lang="ka"] [data-lang="ka"] { display: block !important; }
html[lang="ka"] [data-lang="en"] { display: none !important; }

/* Same switch for phrases sitting inside a sentence or a flex row. These are
   more specific than the rules above, so they keep inline elements inline. */
[data-lang="en"].inline { display: inline !important; }
[data-lang="ka"].inline { display: none !important; }
html[lang="ka"] [data-lang="ka"].inline { display: inline !important; }
html[lang="ka"] [data-lang="en"].inline { display: none !important; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header .inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
}

.brand svg { display: block; width: 26px; height: 26px; }

.langs {
  margin-left: auto;
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--soft);
  border: 1px solid var(--soft-line);
  border-radius: 999px;
}

.langs button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 600 13px/1 inherit;
  font-family: inherit;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

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

html[lang="en"] .langs button[data-set-lang="en"],
html[lang="ka"] .langs button[data-set-lang="ka"] {
  background: var(--bg);
  color: var(--forest);
  box-shadow: 0 1px 2px rgba(16, 24, 32, .08);
}

@media (prefers-color-scheme: dark) {
  html[lang="en"] .langs button[data-set-lang="en"],
  html[lang="ka"] .langs button[data-set-lang="ka"] { color: var(--mint); }
}

/* ---------- layout ---------- */

.wrap { max-width: 780px; margin: 0 auto; padding: 52px 22px 96px; }

h1 {
  color: var(--ink);
  font-size: clamp(28px, 5vw, 36px);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 8px;
}

h2 {
  color: var(--ink);
  font-size: 21px;
  letter-spacing: -.01em;
  margin: 44px 0 12px;
  padding-top: 4px;
}

h3 { color: var(--ink); font-size: 16px; margin: 26px 0 8px; }

p, li { margin: 0 0 12px; }
ul, ol { padding-left: 22px; margin: 0 0 16px; }
li::marker { color: var(--muted); }

a { color: var(--accent); text-underline-offset: 2px; }

strong { color: var(--ink); font-weight: 600; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--emerald);
  margin: 0 0 14px;
}

.updated { color: var(--muted); font-size: 14px; margin: 0 0 34px; }

.lead { font-size: 17px; color: var(--body); }

/* ---------- components ---------- */

.card-link {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 12px;
  background: var(--bg);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}

.card-link:hover {
  border-color: var(--emerald);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.card-link span {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 14px;
  margin-top: 3px;
}

.box {
  background: var(--soft);
  border: 1px solid var(--soft-line);
  border-radius: 16px;
  padding: 22px 24px;
  margin: 24px 0;
}

.box > :last-child { margin-bottom: 0; }

.mail {
  display: inline-block;
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
  text-decoration: none;
  word-break: break-word;
}

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

.note { font-size: 14px; color: var(--muted); }

.table-scroll { overflow-x: auto; margin: 0 0 18px; }

table { width: 100%; border-collapse: collapse; font-size: 15px; }

th, td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th { color: var(--ink); font-weight: 600; }
thead th { border-bottom-width: 2px; }
tbody tr:last-child td { border-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 52px 0; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 40px;
}

.site-footer .inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 28px 22px 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  font-size: 14px;
  color: var(--muted);
}

.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }
.site-footer .spacer { margin-left: auto; }