/* ד״ר דפנה אדר — site styles
   Layout: quiet centered hero (name, title, small arched portrait), then a cream RTL page of split sections. */

@font-face{
  font-family:"Frank Ruhl Libre";
  src:url("/assets/fonts/frank-ruhl-libre.woff") format("woff");
  font-weight:300 600;
  font-style:normal;
  font-display:swap;
}

:root{
  --surface:#ECE5D8;
  --ink:#1F2620;
  --muted:#5B6559;
  --sage:#4F6E54;         /* WCAG AA: 5.0:1 on cream */
  --title:#4F82AE;        /* the doctor's soft blue: 3.6:1, large headings only */
  --line:#DDD5C6;
  --page:#F5F0E6;
  --veil:rgba(245,240,230,.62);
  --veil-strong:rgba(245,240,230,.9);
  --display:"Frank Ruhl Libre","David","Times New Roman",serif;
  --body:"Frank Ruhl Libre","David","Times New Roman",serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --surface:#1C211D; --ink:#E7EBE4; --muted:#A2AB9E; --sage:#9BB79F;
    --title:#9DC3E2; --line:#2E352F; --page:#141815; --veil:rgba(20,24,21,.72); --veil-strong:rgba(20,24,21,.92); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --surface:#1C211D; --ink:#E7EBE4; --muted:#A2AB9E; --sage:#9BB79F;
  --title:#9DC3E2; --line:#2E352F; --page:#141815; --veil:rgba(20,24,21,.72); --veil-strong:rgba(20,24,21,.92); color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); }
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  overflow-x:hidden;
  font-family:var(--body);
  font-size:1.125rem; line-height:1.75;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img{ max-width:100%; }
h1,h2,h3{ font-family:var(--display); font-weight:400; margin:0; text-wrap:balance; }
p{ margin:0; }
strong{ font-weight:600; }
a{ color:inherit; }
a:focus-visible,button:focus-visible{ outline:2px solid var(--sage); outline-offset:3px; border-radius:6px; }
.ltr{ direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; }
.muted{ color:var(--muted); }
.nowrap{ white-space:nowrap; }

.skip{
  position:absolute; inset-inline-start:12px; top:-60px; z-index:10;
  background:var(--sage); color:var(--page); padding:.5em 1em; border-radius:999px; text-decoration:none; font-size:1rem;
}
.skip:focus{ top:calc(12px + env(safe-area-inset-top,0px)); }

/* ───────── hero ───────── */
.nav{
  display:flex; align-items:center; justify-content:flex-end; gap:16px;
  padding-inline:clamp(18px,3.2vw,56px);
  padding-block:calc(clamp(16px,2vw,30px) + env(safe-area-inset-top,0px)) clamp(16px,2vw,30px);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  border:1px solid var(--sage); cursor:pointer; text-decoration:none; white-space:nowrap;
  font-family:inherit; font-weight:500; line-height:1.4; border-radius:999px;
  transition:background-color .18s ease, transform .18s ease, filter .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--solid{ background:var(--sage); color:var(--page); font-size:1rem; padding:.7em 1.45em; }
.btn--solid:hover{ filter:brightness(1.1); }
.btn--ghost{ background:transparent; color:var(--sage); font-size:.9375rem; padding:.55em 1.2em; }
.btn--ghost:hover{ background:var(--surface); }
.btn--small{ font-size:.9375rem; padding:.6em 1.25em; }

.top-band{
  position:relative; isolation:isolate;
  background-color:var(--page);
  background-image:url("/assets/img/hero-bg.jpg");
  background-image:image-set(url("/assets/img/hero-bg.webp") type("image/webp"), url("/assets/img/hero-bg.jpg") type("image/jpeg"));
  background-position:center 45%; background-size:cover; background-repeat:no-repeat;
}
.top-band::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 46% 62% at 50% 52%, var(--veil-strong) 0%, var(--veil-strong) 45%, transparent 100%),
    linear-gradient(var(--veil), var(--veil));
}
.top-band::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; z-index:-1; pointer-events:none;
  height:clamp(140px, 22vw, 280px);
  background:linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--page) 55%, transparent) 45%, var(--page) 100%);
}
.top-band + .page .intro{ padding-top:24px; }
.hero{
  display:grid; justify-items:center; text-align:center;
  padding:clamp(40px,7vw,96px) 20px clamp(64px,8vw,112px);
}
.hero__title{ font-size:clamp(2rem, 4vw, 3.1rem); font-weight:400; line-height:1.15; color:var(--title); }
.hero__sub{ margin-top:.55em; font-size:clamp(1.1rem, 1.6vw, 1.35rem); font-weight:300; color:var(--muted); }
.hero__portrait{
  margin-top:clamp(32px,4vw,48px);
  width:clamp(170px, 20vw, 240px); max-width:100%; aspect-ratio:4/5;
  border-radius:200px 200px 1.2em 1.2em; overflow:hidden; background:var(--surface);
  box-shadow:0 18px 40px -22px rgba(31,38,32,.45);
}
.hero__portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block; }
.hero__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:clamp(28px,3.4vw,40px); }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }
/* scroll reveal: only armed by script, so the page is fully visible without it */
.reveal-on .rv{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--rv-delay,0s); }
.reveal-on .rv.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal-on .rv{ opacity:1; transform:none; } }

/* ───────── page below the hero ───────── */
.page{ padding-inline:20px; }
.wrap{ max-width:1080px; margin-inline:auto; }
section.block{ padding-block:88px; border-top:1px solid var(--line); }

.intro{ display:grid; gap:10px; justify-items:center; text-align:center; padding-block:64px; }
.intro p{ max-width:100%; font-family:var(--display); font-size:clamp(1rem,1.4vw,1.2rem); font-weight:400; line-height:1.6; color:var(--ink); text-wrap:balance; }
@media (min-width:1000px){ .intro p{ white-space:nowrap; } }
.intro p + p{ color:var(--muted); }
.eyebrow{ font-size:.8125rem; letter-spacing:.08em; color:var(--sage); font-weight:600; }
.split{ display:grid; grid-template-columns:1fr 2fr; gap:56px; }
.split > *{ min-width:0; }
.split h2{ font-size:clamp(1.75rem,3.4vw,2.5rem); line-height:1.2; color:var(--title); margin-top:10px; }
.prose{ max-width:62ch; display:grid; gap:18px; }
.prose--spaced{ margin-top:16px; }
@media (max-width:760px){ .split{ grid-template-columns:1fr; gap:24px; } section.block{ padding-block:56px; } }
@media (min-width:761px){ .nowrap-wide{ white-space:nowrap; } }

.about{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:56px; align-items:start; }
.about > div:only-child{ grid-column:1 / -1; max-width:760px; }

.clinic-side{ align-self:end; display:grid; gap:18px; }
.nav-links{ display:flex; flex-wrap:wrap; gap:10px; }

.materials{
  align-self:end; display:grid; gap:10px;
  padding:24px 28px; border-radius:1.2em; background:var(--surface);
  min-width:0;
}
.materials__label{ font-size:1.0625rem; font-weight:500; color:var(--ink); }
.materials__row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.materials__mail{ font-size:1.2rem; color:var(--ink); text-decoration:none; overflow-wrap:anywhere; min-width:0; }
.copy{
  display:inline-flex; align-items:center; gap:6px;
  font:500 .875rem var(--body); color:var(--sage);
  background:transparent; border:1px solid color-mix(in srgb, var(--sage) 55%, transparent);
  border-radius:999px; padding:.35em .95em; cursor:pointer; line-height:1.4;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.copy:hover,.copy.is-done{ background:var(--sage); color:var(--page); border-color:var(--sage); }
.copy svg{ width:14px; height:14px; flex:none; }
.contact-note{ color:var(--muted); margin-top:14px; }
.contact-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.contact-alt{ color:var(--muted); margin-top:16px; font-size:1rem; }
.contact-alt a{ color:var(--sage); text-underline-offset:3px; overflow-wrap:anywhere; }
.btn--sage{ background:var(--sage); color:var(--page); font-size:1rem; padding:.7em 1.5em; }
.btn--sage:hover{ filter:brightness(1.1); }

footer{ border-top:1px solid var(--line); padding-block:36px 48px; font-size:.875rem; color:var(--muted); }
footer .wrap{ display:grid; gap:10px; }
footer strong{ color:var(--ink); }
footer a{ color:var(--sage); text-underline-offset:3px; }
.footer-links{ display:flex; flex-wrap:wrap; gap:6px 20px; }

/* ───────── secondary pages (accessibility, privacy, 404) ───────── */
.doc{ max-width:760px; margin-inline:auto; padding:calc(48px + env(safe-area-inset-top,0px)) 20px 72px; }
.doc h1{ font-weight:400; font-size:clamp(2rem,4vw,2.6rem); line-height:1.2; color:var(--title); margin:0 0 8px; }
.doc h2{ font-weight:400; font-size:1.5rem; color:var(--title); margin:40px 0 10px; }
.doc p,.doc ul{ margin:0 0 14px; }
.doc ul{ padding-inline-start:1.2em; }
.doc a{ color:var(--sage); text-underline-offset:3px; }
.doc .back{ display:inline-block; margin-bottom:28px; font-size:1rem; }
.doc .card{ background:var(--surface); border-radius:1.2em; padding:20px 24px; }
.doc .card p:last-child{ margin:0; }
.doc--center{ text-align:center; min-height:70vh; display:grid; align-content:center; justify-items:center; gap:18px; }
.doc--center h1{ margin:0; }