/* reviews.drbenhunter.ch — tokens lifted from the live drbenhunter.ch theme
   (navy #1a2a4e, gold #c9a86a, Muli/Mulish) so this page reads as the practice's own. */
:root {
  color-scheme: light;

  --navy-900: #0f1a31;
  --navy-800: #16233f;
  --navy-700: #1a2a4e; /* brand primary */
  --navy-600: #24386a;
  --navy-100: #dfe4ee;
  --navy-50:  #f2f4f9;

  --gold-700: #8d7338;
  --gold-600: #a3854b;
  --gold-500: #c9a86a; /* brand gold */
  --gold-100: #f3ebdb;

  --cyan-500: #00b2ff;
  --blush-100: #fbe7dd;

  --grey-900: #161617;
  --grey-700: #4a5464;
  --grey-600: #728197;
  --grey-500: #7f8887;
  --grey-300: #bfc4c3;
  --grey-200: #dcdfe5;
  --grey-100: #f1f3f3;
  --white: #ffffff;

  --red-600: #c02b0a;
  --red-50:  #fdefeb;
  --green-700: #1f7a4d;
  --green-50: #edf7f1;

  --surface: var(--white);
  --surface-sunken: var(--navy-50);
  --ink: var(--navy-900);
  --ink-muted: var(--grey-700);
  --ink-subtle: var(--grey-600);
  --accent: var(--navy-700);
  --accent-hover: var(--navy-800);
  --accent-ink: var(--white);
  --border: var(--grey-200);
  --border-strong: var(--grey-300);

  --font-sans: "Mulish", "Muli", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(.84rem, .81rem + .16vw, .94rem);
  --step-0:  clamp(1rem, .96rem + .19vw, 1.125rem);
  --step-1:  clamp(1.19rem, 1.12rem + .33vw, 1.41rem);
  --step-3:  clamp(1.55rem, 1.4rem + .8vw, 2.15rem);

  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs:  .75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;

  --measure-narrow: 34rem;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-pill: 999px;
  --shadow-s: 0 1px 2px rgba(15,26,49,.06), 0 2px 10px rgba(15,26,49,.05);
  --dur-fast: 140ms;
  --ease-out: cubic-bezier(.22,.61,.36,1);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  padding: var(--space-xl) var(--space-s) var(--space-2xl);
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--space-l);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
}

/* ---------- shared shell ---------- */

.masthead { width: 100%; max-width: var(--measure-narrow); display: grid; justify-items: center; }
.masthead img { width: clamp(180px, 52vw, 260px); height: auto; }

.card {
  width: 100%;
  max-width: var(--measure-narrow);
  display: grid;
  gap: var(--space-l);
  text-align: center;
}

.h { margin: 0; font-size: var(--step-3); font-weight: 700; line-height: 1.18; letter-spacing: -.018em; color: var(--navy-700); }
.lead { margin: 0; font-size: var(--step-1); color: var(--ink-muted); }
.fine { margin: 0; font-size: var(--step--1); color: var(--ink-subtle); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: var(--space-xs) var(--space-m);
  font: inherit; font-weight: 600; text-decoration: none;
  color: var(--accent-ink); background: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn--ghost { color: var(--accent); background: transparent; }
.btn--ghost:hover { color: var(--accent-ink); background: var(--accent); }
.btn--large { min-height: 3.5rem; padding: var(--space-s) var(--space-l); font-size: var(--step-1); }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }

a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--navy-600); }

:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 2px; }

.visually-hidden, .hp {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}

.note {
  margin: 0; padding: var(--space-s) var(--space-m);
  text-align: left; font-size: var(--step--1);
  border-radius: var(--radius-m);
}
.note--error { color: #7d1c06; background: var(--red-50); border: 1px solid #f0c4b8; }
.note--ok    { color: #14532d; background: var(--green-50); border: 1px solid #bfe0cd; }
.note p { margin: 0; }

/* ---------- star rating ---------- */

.stars { margin: 0; padding: 0; border: 0; min-width: 0; }
.starrow { display: flex; justify-content: center; gap: var(--space-2xs); }
.star-radio { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
.star {
  display: grid; place-items: center;
  width: clamp(2.75rem, 13vw, 3.25rem); height: clamp(2.75rem, 13vw, 3.25rem);
  border-radius: var(--radius-s); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.star svg {
  width: 100%; height: 100%;
  fill: var(--grey-100); stroke: var(--grey-300); stroke-width: 1px; stroke-linejoin: round;
  transition: fill var(--dur-fast) var(--ease-out), stroke var(--dur-fast) var(--ease-out);
}
.star:hover { transform: scale(1.08); }
.star-radio:checked + .star svg, .star.is-lit svg { fill: var(--gold-500); stroke: var(--gold-600); }
.star-radio:focus-visible + .star { box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--cyan-500); }

/* ---------- forms ---------- */

.fields { display: grid; gap: var(--space-s); width: 100%; text-align: left; }
.field { display: grid; gap: var(--space-3xs); }
.field > label { font-weight: 600; }
.field .opt, .field .hint { font-weight: 400; color: var(--ink-subtle); }
.field .hint { font-size: var(--step--1); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 3rem;
  padding: var(--space-xs) var(--space-s);
  font: inherit; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-s);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 7rem; }

.radiorow { display: flex; gap: var(--space-s); flex-wrap: wrap; }
.radiorow label {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-s);
  font-weight: 400;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  cursor: pointer;
}
.radiorow input { min-height: 0; width: auto; accent-color: var(--accent); }
.radiorow label:has(input:checked) { font-weight: 600; color: var(--navy-700); background: var(--navy-50); border-color: var(--accent); }

/* ---------- review page branches ---------- */

.branch { display: grid; gap: var(--space-m); justify-items: center; }
[hidden] { display: none !important; }

.thanks { display: none; }
.thanks.is-shown { display: grid; }
.thanks.is-shown ~ .main { display: none; }

.public { margin: 0; color: var(--ink-subtle); font-size: var(--step--1); }

/* ---------- submit page ---------- */

.panel {
  width: 100%; max-width: var(--measure-narrow);
  padding: var(--space-l) var(--space-m);
  display: grid; gap: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
}
.panel .h { font-size: var(--step-1); text-align: left; line-height: 1.3; }
.panel__sub { margin: var(--space-3xs) 0 0; font-size: var(--step--1); line-height: 1.4; color: var(--ink-subtle); text-align: left; }
.panel .actions--spaced { margin-top: var(--space-m); }
.panel .consent { margin-top: var(--space-s); text-align: left; }

/* Bilingual field labels: German carries the weight, English sits under it. */
.field > label.stacked, .fieldlabel { display: grid; gap: 1px; font-weight: 600; }
.field > label.stacked .sub, .fieldlabel .sub { font-size: var(--step--1); font-weight: 400; line-height: 1.3; color: var(--ink-subtle); }
.panel__intro { margin: 0; text-align: left; color: var(--ink-muted); }
.panel__foot { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .star:hover { transform: none; }
}