/* Legal pages: accessibility statement, privacy policy, terms. Tokens mirror design.md. */
:root {
  --bg: oklch(0.95 0.022 75);
  --surface: oklch(0.905 0.032 70);
  --ink: oklch(0.29 0.035 45);
  --muted: oklch(0.49 0.035 50);
  --accent: oklch(0.55 0.15 5);
  --on-accent: oklch(0.98 0.01 5);
  --support: oklch(0.68 0.06 125);
  --line: color-mix(in oklch, var(--ink) 16%, transparent);
  --f-display: "Playpen Sans Hebrew", "Alef", sans-serif;
  --f-body: "Alef", system-ui, sans-serif;
  --f-util: "IBM Plex Sans Hebrew", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-body); font-size: 1.125rem; line-height: 1.75;
}
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip {
  position: absolute; inset-inline-start: 16px; inset-block-start: -100px;
  background: var(--accent); color: var(--on-accent); padding: 8px 16px; border-radius: 999px;
  font-family: var(--f-util); z-index: 100;
}
.skip:focus { inset-block-start: 12px; }

.wrap { max-width: 46rem; margin-inline: auto; padding-inline: 16px; }
.site-header { border-block-end: 1px solid var(--line); }
.site-header .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 72px; max-width: 72rem; padding-block: 8px 12px; }
/* Logo: sun-and-moon mark + "חולי" (client's lettering, recoloured via mask) + JULIFLOW. Other languages show the mark + JuliFlow. */
.logo { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; color: var(--ink); line-height: 1; font-size: 1.6rem; }
.logo:hover { color: var(--ink); }
.logo-mark { width: 1.45em; height: 1.45em; flex: none; overflow: visible; }
.logo-stack { display: inline-flex; flex-direction: column; align-items: center; }
.logo-he-img { display: block; height: 1.2em; width: auto; }
.logo-en { font-family: "Outfit", var(--f-util); font-weight: 500; font-size: .28em; letter-spacing: .42em; margin-inline-end: -.42em; margin-block-start: .35em; color: var(--muted); direction: ltr; }
.logo-word { display: none; font-family: "Outfit", var(--f-util); font-weight: 400; font-size: .8em; letter-spacing: .12em; direction: ltr; }
html:not([lang="he"]) .logo-stack { display: none; }
html:not([lang="he"]) .logo-word { display: inline; }
.logo.sm { font-size: 1.25rem; }
.jf-sun { fill: var(--accent); }
.jf-moon, .jf-star { fill: var(--ink); }
.jf-ray { fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; }
.jf-earth { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.wordmark { font-family: var(--f-util); font-weight: 500; font-size: 1.2rem; text-decoration: none; }
/* Language menu */
.lang { position: relative; }
.lang-btn {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
font-family: var(--f-util); font-size: .95rem; font-weight: 500; color: var(--ink);
background: transparent; border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 12px;
}
.lang-btn svg { width: 16px; height: 16px; }
.lang-btn:hover { background: var(--surface); }
.lang-menu {
position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 30;
margin: 0; padding: 6px; list-style: none; min-width: 9rem;
background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px;
box-shadow: 0 16px 32px -20px color-mix(in oklch, var(--ink) 60%, transparent);
}
.lang-menu[hidden] { display: none; }
.lang-menu a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-family: var(--f-util), system-ui, sans-serif; }
.lang-menu a:hover { background: var(--surface); color: var(--ink); }
.lang-menu a[aria-current="true"] { font-weight: 500; background: var(--surface); }
.head-end { display: flex; gap: 12px; align-items: center; }
.back { font-family: var(--f-util); font-size: 1rem; text-decoration: none; padding: 8px 16px; border: 1.5px solid var(--ink); border-radius: 999px; }
.back:hover { background: var(--surface); color: var(--ink); }

main { padding-block: 56px 96px; }
h1 { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.2rem, 5vw, 2.9rem); line-height: 1.3; margin: 0 0 8px; }
.updated { font-family: var(--f-util); font-size: .9rem; color: var(--muted); margin: 0 0 40px; }
h2 { font-family: var(--f-display); font-weight: 500; font-size: 1.6rem; line-height: 1.35; margin: 48px 0 12px; }
p, ul, ol { margin: 0 0 16px; }
ul, ol { padding-inline-start: 1.4em; }
li { margin-block-end: 6px; }
.lead { font-size: 1.25rem; }
dl.contact { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
dl.contact dt { color: var(--muted); font-family: var(--f-util); font-size: 1rem; }
dl.contact dd { margin: 0; }

/* Details the owner still has to fill in */
.fill {
  background: color-mix(in oklch, var(--accent) 14%, var(--bg));
  color: var(--ink); padding: 0 4px; border-radius: 4px;
  border-block-end: 1.5px dashed var(--accent);
}

.site-footer { border-block-start: 1px solid var(--line); padding-block: 32px 96px; font-family: var(--f-util); font-size: .95rem; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; max-width: 72rem; }
.site-footer a { text-decoration: none; }
.site-footer a[aria-current="page"] { color: var(--ink); text-decoration: underline; }