/* Morning Bread — website
   Ontwerpsysteem: docs/brand/Morning-Bread-logo/DESIGN.md
   Kleuren en letters komen alleen daaruit. */

/* ---------- Lettertypen (zelf gehost, geen Google Fonts) ---------- */
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-latin-var-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Merkkleuren uit DESIGN.md (logo en drukwerk) */
  --mb-night: #15100C;
  --mb-gold: #C9A25C;
  --mb-gold-light: #E3C483;
  --mb-parchment: #F4EDE1;

  /* Website in het thema "Avond" uit de app (DESIGN.md van de app, richting B) */
  --bg: #121110;
  --surface: #1D1B18;
  --text: #F2EDE4;
  --text-2: #B0A89B;
  --accent: #D4AE68;
  --accent-hover: #E3C483;
  --on-accent: #1A1408;
  --line: #3A3631;
  --case: #0A0A09;
  --case-edge: rgba(242, 237, 228, .18);

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Tekstschaal uit DESIGN.md: 48 / 34 / 26 / 20 / 17 / 15 / 13 */
  --fs-1: 3rem;
  --fs-2: 2.125rem;
  --fs-3: 1.625rem;
  --fs-4: 1.25rem;
  --fs-5: 1.0625rem;
  --fs-6: .9375rem;
  --fs-7: .8125rem;

  /* Ruimte uit DESIGN.md: 4 8 12 16 24 32 48 64 96 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --gut: 24px;
  --max: 1120px;
  --measure: 640px;
  --radius: 12px;
  --radius-card: 16px;
  --section-pad: var(--s-9);
}
@media (min-width: 640px) { :root { --gut: 48px; } }
@media (min-width: 1024px) { :root { --gut: 64px; --section-pad: 128px; } }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(212, 174, 104, .18);
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-5);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-2); }
h2 { font-size: var(--fs-3); }
h3 { font-size: var(--fs-4); }
@media (min-width: 640px) {
  h1 { font-size: var(--fs-1); }
  h2 { font-size: var(--fs-2); }
}
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--s-4); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent-hover); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(212, 174, 104, .35); color: var(--text); }

.wrap {
  width: min(100% - 2 * var(--gut), var(--max));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: var(--gut);
  top: var(--s-3);
  z-index: 10;
  padding: var(--s-3) var(--s-4);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; color: var(--on-accent); }

.muted { color: var(--text-2); }
.lead { font-size: var(--fs-5); color: var(--text-2); max-width: 34em; }
@media (min-width: 640px) { .lead { font-size: var(--fs-4); line-height: 1.5; } }

/* ---------- Kop ---------- */
.site-header { position: relative; z-index: 5; }
.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  column-gap: var(--s-5);
}
.brand { display: inline-flex; align-items: center; min-height: 80px; }
.brand img { width: 40px; height: auto; }
.brand .brand__wide { display: none; }
@media (min-width: 600px) {
  .brand .brand__mark { display: none; }
  .brand .brand__wide { display: block; width: 188px; }
}

.site-nav { font-size: var(--fs-6); }
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-1);
}
.site-nav__list > li { display: flex; align-items: center; }
.site-nav a,
.lang__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding-inline: var(--s-2);
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--text); }

/* Taalknop */
.lang { margin-left: var(--s-3); }
.lang__current { color: var(--text); padding-inline: var(--s-2) var(--s-1) !important; min-width: 0 !important; }
.lang__sep { color: var(--text-2); opacity: .5; padding-inline: 2px; }
.site-nav .lang a { padding-inline: var(--s-1) var(--s-2) !important; justify-content: flex-start; }

@media (min-width: 960px) {
  .nav-js .menu-toggle { display: none; }
}

/* Met JavaScript, onder 960 px: knop Menu met een uitklapbaar paneel */
.menu-toggle {
  display: none;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: 0 var(--s-4);
  font: inherit;
  font-size: var(--fs-6);
  font-weight: 500;
  color: var(--text);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.menu-toggle__icon,
.menu-toggle__icon::before {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
}
.menu-toggle__icon { position: relative; transform: translateY(-3px); }
.menu-toggle__icon::before { content: ""; position: absolute; top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: 0; transform: rotate(-90deg); }

@media (max-width: 959px) {
  .nav-js .menu-toggle { display: inline-flex; }
  .nav-js .site-nav { display: none; flex-basis: 100%; padding-bottom: var(--s-5); }
  .nav-js .site-nav.is-open { display: block; }
  .nav-js .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--line); }
  .nav-js .site-nav__list > li { border-bottom: 1px solid var(--line); }
  .nav-js .site-nav a,
  .nav-js .lang__current { justify-content: flex-start; padding-inline: 0; min-height: 52px; font-size: var(--fs-5); }
  .nav-js .lang { margin-left: 0; }
  .nav-js .lang__current { padding-inline: 0 var(--s-1) !important; }
}

/* ---------- App Store-badge ---------- */
.store { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.store__link {
  display: inline-flex;
  border-radius: 9px;
  min-height: 44px;
  align-items: center;
}
.store__link img { width: 150px; height: auto; }
.store__link:hover img { opacity: .85; }
@media (prefers-reduced-motion: no-preference) { .store__link img { transition: opacity .15s ease; } }
.store__note { font-size: var(--fs-6); color: var(--text-2); }
.store--live .store__note { display: none; }

/* ---------- iPhone-mockup (zelf getekend, geen Apple-afbeelding) ---------- */
.device {
  --w: 280px;
  position: relative;
  width: var(--w);
  flex: none;
  padding: calc(var(--w) * .028);
  border-radius: calc(var(--w) * .158);
  background: var(--case);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 0 0 1px var(--case-edge);
}
.device img {
  width: 100%;
  height: auto;
  aspect-ratio: 1320 / 2868;
  object-fit: cover;
  border-radius: calc(var(--w) * .13);
  background: var(--surface);
}
.device::after { /* Dynamic Island */
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--w) * .052);
  width: calc(var(--w) * .268);
  height: calc(var(--w) * .079);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}

/* Uitsnede van een scherm (zelfde schermafbeelding, ingezoomd) */
/* Toont alleen de foto met "Verse of the day" uit home.png (1320 × 2868):
   x 48–1272, y 1376–2620. Pas de waarden aan als de schermafbeelding anders is. */
.detail {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1224 / 1244;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}
.detail img {
  position: absolute;
  top: 0;
  left: -3.92%;
  width: 107.84%;
  max-width: none;
  margin-top: -112.42%;
}

/* ---------- Secties ---------- */
.section { padding-block: var(--section-pad); }
.section--raised { background: var(--surface); }

/* Hero */
.hero { padding-block: var(--s-6) var(--s-9); }
.hero__grid { display: grid; gap: var(--s-8); }
.hero__text { display: grid; gap: var(--s-5); align-content: center; }
.hero__text h1 { max-width: 12em; }
.hero__text .store { margin-top: var(--s-3); }
.hero__device { display: flex; justify-content: center; }
.hero .device { --w: min(270px, 72vw); }
@media (min-width: 900px) {
  .hero { padding-block: var(--s-6) var(--s-9); min-height: calc(100svh - 80px); display: grid; align-items: center; }
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .hero__device { justify-content: flex-end; }
  .hero .device { --w: clamp(240px, calc((100svh - 200px) * .47), 330px); }
}

/* Twee kolommen: tekst en beeld */
.split { display: grid; gap: var(--s-8); align-items: center; }
.split__text { display: grid; gap: var(--s-5); max-width: var(--measure); }
.split__visual { display: flex; justify-content: center; }
.split .device { --w: min(250px, 66vw); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); }
  .split--flip .split__text { order: 2; }
  .split--flip .split__visual { order: 1; }
  .split .device { --w: clamp(230px, calc((100svh - 260px) * .46), 300px); }
}
@media (min-width: 900px) {
  .feature { min-height: 100svh; display: grid; align-items: center; }
}

/* Hoe het werkt */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-6);
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: var(--s-4);
  row-gap: var(--s-1);
}
.steps li::before {
  content: counter(step);
  grid-row: 1 / span 2;
  font-family: var(--serif);
  font-size: var(--fs-3);
  line-height: 1.05;
  color: var(--accent);
}
.steps h3 { font-size: var(--fs-4); }
.steps p { color: var(--text-2); }
.aside-note {
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: var(--fs-6);
}

/* Vers */
.verse { text-align: center; }
.verse .wrap { display: grid; justify-items: center; gap: var(--s-6); }
.verse__mark { width: 56px; }
.verse figure, .verse blockquote { margin: 0; }
.verse blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-2);
  line-height: 1.15;
  text-wrap: balance;
}
@media (min-width: 640px) { .verse blockquote p { font-size: var(--fs-1); } }
.verse figcaption { margin-top: var(--s-4); font-size: var(--fs-6); color: var(--text-2); }
.verse__note { max-width: 30em; color: var(--text-2); font-size: var(--fs-6); }
@media (min-width: 900px) { .verse { min-height: 80svh; display: grid; align-items: center; } }

/* Privacy */
.privacy .wrap { display: grid; gap: var(--s-5); }
.privacy p { max-width: var(--measure); }
.privacy__body { color: var(--text-2); }
@media (min-width: 900px) {
  .privacy .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-9); align-items: start; }
}

/* Slot */
.closing .wrap { display: grid; gap: var(--s-5); justify-items: start; }

/* Voettekst */
.site-footer { padding-block: var(--s-6) var(--s-7); font-size: var(--fs-6); color: var(--text-2); }
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-2);
}
.site-footer li { display: inline-flex; align-items: center; }
.site-footer li:first-child { flex-basis: 100%; min-height: 44px; }
.site-footer li + li + li::before { content: "·"; margin-right: var(--s-2); color: var(--text-2); }
.site-footer li:last-child { flex-basis: 100%; }
.site-footer li:last-child::before { display: none; }
@media (min-width: 760px) {
  .site-footer li:first-child, .site-footer li:last-child { flex-basis: auto; }
  .site-footer li + li::before { content: "·"; margin-right: var(--s-2); color: var(--text-2); }
  .site-footer li:last-child::before { display: inline; }
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-2);
  text-decoration: none;
}
.site-footer a:hover { color: var(--text); }

/* ---------- Subpagina's: privacy, voorwaarden, support, 404 ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.page { padding-block: var(--s-8) var(--s-9); }
@media (min-width: 1024px) { .page { padding-block: var(--s-9) 128px; } }
.page__head { display: grid; gap: var(--s-4); max-width: var(--measure); margin-bottom: var(--s-8); }
.page__meta { font-size: var(--fs-6); color: var(--text-2); }

.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--fs-3); margin: var(--s-8) 0 var(--s-4); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { color: var(--text-2); }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: var(--s-4); }
.prose ul { margin: 0; padding-left: 1.25em; }
.prose li + li { margin-top: var(--s-2); }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--text); font-weight: 500; }
.prose dl { margin: var(--s-4) 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-5); color: var(--text-2); }
.prose dt { color: var(--text); }
.prose dd { margin: 0; }
@media (max-width: 479px) {
  .prose dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .prose dd + dt { margin-top: var(--s-3); }
}

/* Veelgestelde vragen */
.faq { max-width: var(--measure); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 64px;
  padding-block: var(--s-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: var(--fs-4);
  font-weight: 500;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-hover); }
.faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: translateY(-3px) rotate(45deg);
}
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
@media (prefers-reduced-motion: no-preference) { .faq summary::after { transition: transform .2s ease; } }
.faq summary:focus-visible { outline-offset: 2px; }
.faq .faq__answer { padding-bottom: var(--s-5); color: var(--text-2); }
.faq .faq__answer p + p { margin-top: var(--s-3); }

.contact { margin-top: var(--s-8); display: grid; gap: var(--s-3); max-width: var(--measure); }
.contact h2 { font-size: var(--fs-3); }
.contact p { color: var(--text-2); }
.mail-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: var(--s-2);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 6.4vw, var(--fs-2));
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* 404 */
.notfound { min-height: calc(100svh - 80px - 140px); display: grid; align-items: center; }
.notfound__body { display: grid; gap: var(--s-5); max-width: var(--measure); }
.notfound p { color: var(--text-2); }
.notfound__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.notfound__links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Zachte fade-in (alleen met JavaScript, uit bij reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .8s ease, transform .8s ease; }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}