/* zielenzorg.nl: "Ziel & Zorg is Wise Doctors".
   One static page. No scripts, no inline styles, no external fonts or requests. */

:root {
  color-scheme: light dark;

  --bg: #FCFBF8;          /* Wise Doctors off-white */
  --ink: #1F2A2C;         /* 14.2:1 on --bg */
  --muted: #4F5B5D;       /* 6.8:1 on --bg */
  --zz: #0A626D;          /* Ziel & Zorg teal, 6.8:1 */
  --gold: #A47900;        /* Wise Doctors gold: large text and decoration only (3.8:1) */
  --gold-text: #866200;   /* darker gold for normal-size text, 5.4:1 */
  --h1-wd: #866200;       /* "Wise Doctors" in the h1: passes 4.5:1 even if the text is shown smaller */
  --line: #E7E0D3;

  --panel: #FFFFFF;       /* the logos always sit on a light card */
  --panel-line: #E7E0D3;
  --panel-muted: #4F5B5D; /* 7.0:1 on white */
  --panel-arrow: #A47900;

  --btn: #227181;         /* Wise Doctors teal, white text 5.6:1 */
  --btn-ink: #FFFFFF;
  --btn-hover: #1A5C68;   /* white text 7.6:1 */
  --focus: #A47900;

  --shadow: 0 1px 2px rgb(31 42 44 / 0.04), 0 18px 40px -22px rgb(31 42 44 / 0.22);
  --btn-shadow: 0 1px 2px rgb(31 42 44 / 0.08), 0 10px 24px -14px rgb(34 113 129 / 0.75);

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E2326;
    --ink: #EDE7DC;       /* 13.3:1 */
    --muted: #B9C4C3;     /* 9.1:1 */
    --zz: #7FC8D2;        /* 8.6:1 */
    --gold: #E2BE6A;      /* 9.2:1 */
    --gold-text: #E2BE6A;
    --h1-wd: #E2BE6A;
    --line: #21403F;

    --panel: #F4F0E9;     /* Wise Doctors warm beige, keeps both logos legible */
    --panel-line: #F4F0E9;
    --panel-muted: #4F5B5D;

    --btn: #8FD3DC;       /* dark ink on light teal, 9.7:1 */
    --btn-ink: #0E2326;
    --btn-hover: #B4E2E8;
    --focus: #E2BE6A;

    --shadow: 0 18px 40px -22px rgb(0 0 0 / 0.6);
    --btn-shadow: none;
  }
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* A thin two-brand rule along the top: Ziel & Zorg teal, then Wise Doctors gold. */
body::before {
  content: "";
  flex: none;
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--zz) 0 50%, var(--gold) 50% 100%);
}

img {
  max-width: 100%;
}

.page {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 9vh, 6.5rem) 1rem clamp(2.5rem, 8vh, 5rem);
  text-align: center;
}

/* ---- The two logos, Ziel & Zorg -> Wise Doctors ---- */

.brands {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 0 0 clamp(2.25rem, 6vw, 3.25rem);
  padding: 2rem 1.25rem;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  margin: 0;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

.brand--zz img {
  max-width: 15rem;
}

.brand--wd img {
  max-width: 12.75rem;
}

.brand figcaption {
  font-size: 0.8125rem;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: var(--panel-muted);
}

/* Arrow drawn with CSS: a 2px shaft and a chevron head. Points down on narrow screens. */
.arrow {
  flex: none;
  position: relative;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--panel-arrow);
  transform: rotate(90deg);
}

.arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  right: 6px;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: currentColor;
}

.arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6.5px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ---- Text ---- */

h1 {
  margin: 0 auto 1.25rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.35rem + 3.2vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word; /* the   pairs may break only if they would overflow (large text at 320px) */
}

.h1-zz {
  color: var(--zz);
}

.h1-is {
  font-style: italic;
  color: var(--muted);
}

/* the destination gets the larger type: from Ziel & Zorg to Wise Doctors */
.h1-wd {
  font-size: 1.1em;
  color: var(--h1-wd);
}

.lead {
  max-width: 30rem;
  margin: 0 auto 1.75rem;
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.3125rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.about {
  max-width: 29rem;
  margin: 0 auto 2.25rem;
  color: var(--muted);
  text-wrap: pretty;
}

/* short gold rule between the lead and the description */
.about::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin: 0 auto 1.5rem;
  border-radius: 1px;
  background: var(--gold);
}

/* ---- The one button ---- */

.cta {
  margin: 0 0 2.5rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;            /* full width on phones: a bigger tap target */
  max-width: 20rem;
  min-height: 3.25rem;
  padding: 0.8rem 1.75rem;
  border: 2px solid transparent; /* shows as a real border in forced-colors mode */
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  box-shadow: var(--btn-shadow);
}

.button:hover {
  background: var(--btn-hover);
}

.button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.button__arrow {
  display: inline-block;
}

.tagline {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);
  line-height: 1.4;
  color: var(--gold-text);
  text-wrap: balance;
}

/* ---- Footer ---- */

.site-footer {
  flex: none;
  padding: 1.5rem 1rem 2rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

.site-footer p {
  max-width: 42rem;
  margin: 0 auto;
}

/* ---- Wider screens: logos side by side with a right-pointing arrow ---- */

@media (min-width: 30em) {
  .page,
  .site-footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .brands {
    padding: 2.25rem 2rem;
  }
}

@media (min-width: 40em) {
  .button {
    width: auto;
    max-width: 100%;
  }
}

@media (min-width: 44em) {
  .brands {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 2.5rem 2rem 2.25rem;
  }

  .brand {
    width: auto;
  }

  .brand img {
    width: auto;
    max-width: none;
  }

  .brand--zz img {
    height: 3rem;
  }

  .brand--wd img {
    height: 3.25rem;
  }

  /* centre the arrow on the logos, not on logo + caption */
  .arrow {
    margin-top: 0.2rem;
    transform: none;
  }
}

/* ---- Preferences ---- */

/* Motion is opt-in: it only exists when the visitor has not asked for less. */
@media (prefers-reduced-motion: no-preference) {
  .button {
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .button:active {
    transform: translateY(1px);
  }

  .button__arrow {
    transition: transform 0.2s ease;
  }

  .button:hover .button__arrow,
  .button:focus-visible .button__arrow {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .button:active,
  .button__arrow {
    transform: none;
  }
}

@media (forced-colors: active) {
  .brands {
    forced-color-adjust: none; /* keep the light card so the logos stay readable */
    border-color: CanvasText;
  }

  .button {
    border-color: ButtonText;
  }

  body::before {
    background: CanvasText;
  }
}

@media print {
  body::before,
  .brands {
    box-shadow: none;
  }

  .button {
    border-color: currentColor;
    background: none;
    color: #000;
  }

  .button::after {
    content: " (wisedoctors.nl)";
  }
}