/* =============================================================================
   Georgix site: one shared stylesheet for the holding page and the legal pages.
   Brand: navy main background, deep navy secondary surface, teal as the single accent,
   light gray for light bands, Rubik. Buttons are navy text on teal, never white on teal.
   Layout uses logical properties, so the same rules serve RTL (Hebrew) and LTR (English).
   ============================================================================= */

/* Rubik, self-hosted (SIL OFL, see fonts/OFL.txt). Variable weight axis 300-900. */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/rubik-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/rubik-latin.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;
}

/* Contrast (WCAG): white on navy 15.9, soft on navy 10.5, teal on navy 5.4,
   navy on teal 5.4, navy on light gray 13.5, soft-ink on light gray 6.9. */
:root {
  --navy: #16213e; /* main background */
  --deep: #0e1730; /* secondary dark surface */
  --teal: #1faa8c; /* the single accent */
  --white: #ffffff;
  --mist: #e8edf2; /* light backgrounds */
  --soft: #c9d3e0; /* secondary text on navy */
  --soft-ink: #44506a; /* secondary text on light gray */
  --rule: #2a3a5c; /* hairlines and chat bubbles on dark */
  --radius: 1.25rem;
  --measure: 46rem; /* about 68 characters of Rubik at body size; in rem so header, main and footer align */
  --gutter: 1.25rem;
  color-scheme: dark;
}

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

html {
  background: var(--navy);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--navy);
  color: var(--white);
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.8;
  font-weight: 400;
  overflow-wrap: break-word;
}

/* ---- Links ---------------------------------------------------------------- */
a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--teal);
}
a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
/* Emails and addresses stay left-to-right and isolated inside Hebrew text. */
a[href^="mailto:"],
a[href^="http"],
bdi {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---- Shared frame --------------------------------------------------------- */
.site-header,
.site-main,
.site-footer {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule);
  line-height: 1.2;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--white);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.brand:hover {
  color: var(--teal);
}
.brand img {
  display: block;
  width: 28px;
  height: 28px;
}

.lang-switch {
  color: var(--soft);
  font-size: 0.9375rem;
}

.site-main {
  flex: 1 0 auto;
  padding-block: 3rem 4rem;
}

.site-footer {
  padding-block: 1.75rem 2.5rem;
  border-top: 1px solid var(--rule);
  color: var(--soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}
.site-footer a {
  color: var(--soft);
  text-decoration-color: var(--rule);
}
.site-footer a:hover,
.site-footer a[aria-current="page"] {
  color: var(--white);
  text-decoration-color: var(--teal);
}
.site-footer p {
  margin: 0;
}

/* ---- Document typography -------------------------------------------------- */
.doc h1 {
  margin: 0 0 1rem;
  padding-top: 1.25rem;
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  position: relative;
}
/* A short teal bar above the title: the one accent. */
.doc h1::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 3rem;
  height: 3px;
  border-radius: 2px;
  background: var(--teal);
}

.doc h2 {
  margin: 3rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.35;
}
.doc h3 {
  margin: 2rem 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--teal);
}

.doc p {
  margin: 0 0 1.1rem;
}
.doc .meta {
  color: var(--soft);
  margin-block: 0 0.35rem;
}
.doc .note {
  color: var(--soft);
  font-size: 0.9375rem;
  margin-block: 0 1.75rem;
}
.doc strong {
  font-weight: 600;
}

.doc ul,
.doc ol {
  margin: 0 0 1.25rem;
  padding-inline-start: 1.5rem;
}
.doc li {
  margin-block: 0.4rem;
  padding-inline-start: 0.25rem;
}
.doc li::marker {
  color: var(--soft);
}
.doc li > ul {
  margin-block: 0.4rem 0.6rem;
}

/* ---- Table (providers list) ----------------------------------------------- */
.doc table {
  width: 100%;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
  font-size: 0.9688rem;
  line-height: 1.6;
}
.doc th,
.doc td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  text-align: start;
  vertical-align: top;
}
.doc th {
  color: var(--soft);
  font-weight: 500;
  border-bottom-color: var(--soft);
}
.doc td:first-child {
  font-weight: 500;
}

@media (max-width: 40rem) {
  :root {
    --gutter: 1rem;
  }
  body {
    font-size: 1rem;
  }
  .site-main {
    padding-block: 2rem 3rem;
  }
  .doc h2 {
    margin-top: 2.25rem;
  }
  /* Stack the table rows so three columns stay readable on a phone. */
  .doc table,
  .doc tbody,
  .doc tr,
  .doc td {
    display: block;
    width: 100%;
  }
  .doc thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .doc tr {
    padding-block: 0.6rem;
    border-bottom: 1px solid var(--rule);
  }
  .doc td {
    padding: 0.1rem 0;
    border: 0;
  }
  .doc td:first-child {
    color: var(--white);
    font-size: 1.0625rem;
  }
  .doc td + td {
    color: var(--white);
  }
  .doc td:last-child {
    color: var(--soft);
  }
}

/* ---- Holding page --------------------------------------------------------- */
.home .site-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 4rem;
}
.home-mark {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 2rem;
}
.home h1 {
  margin: 0;
  font-size: clamp(3rem, 12vw, 5.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}
.home-line {
  margin: 1.25rem 0 0;
  font-size: clamp(1.25rem, 3.5vw, 1.625rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
}
.home-contact {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  max-width: 22rem;
  color: var(--soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.home-contact a {
  font-size: 1.125rem;
}
.home-contact span {
  display: block;
}

@media print {
  :root {
    color-scheme: light;
  }
  html,
  body {
    background: #fff;
    color: #000;
  }
  a {
    color: #000;
  }
  .site-header,
  .site-footer {
    border-color: #999;
  }
}