/* ====================================================================
 * Friends Recommend — design system
 * ====================================================================
 *
 * Gewone CSS, geen @apply. Reden: de Tailwind-CDN compileert in de
 * browser, en een klasse die daar stilletjes niet uitkomt levert een
 * onzichtbare fout op. Letterlijke waarden falen niet stil.
 *
 * De schaal is 4px. Alles is een veelvoud daarvan. Zodra een component
 * zijn eigen tussenmaat verzint, gaat het ritme kapot en dat zie je
 * meteen aan de interface, ook al kun je niet aanwijzen waarom.
 *
 * Volgorde: tokens, basis, typografie, knoppen, velden, kaarten,
 * badges, avatars, tags, navigatie, meldingen, staten, beweging.
 * ==================================================================== */

/* --- 1. Tokens ---------------------------------------------------- */
:root {
  /* Lettertypes staan hier als variabele, zodat een ander lettertype één
     regel is en niet een zoektocht door vier bestanden.
     Wisselen betekent: deze regel, de fontFamily in theme.js, en de
     Google-Fonts-link in de vijf pagina's. */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;

  --canvas:  #FBF9F5;
  --surface: #FFFFFF;
  --raised:  #F5F1EA;
  --ink:     #1A1813;
  --muted:   #6B6458;
  --faint:   #9A9385;
  --line:    #E8E2D7;

  --accent:      #1E5245;
  --accent-deep: #143A31;
  --accent-soft: #E9F0ED;
  --accent-line: #C6D8D1;

  --clay:      #B0603A;
  --clay-soft: #FAEFE8;
  --clay-line: #EAD3C4;

  --bridge:      #8A6D2F;
  --bridge-soft: #FAF3E2;
  --bridge-line: #E8DBB8;

  /* Ruimte. Vier pixels, en niets ertussen. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --s12: 48px; --s16: 64px; --s20: 80px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px;

  --shadow-card: 0 1px 2px rgba(26,24,19,.04), 0 10px 26px -16px rgba(26,24,19,.20);
  --shadow-lift: 0 2px 6px rgba(26,24,19,.05), 0 22px 48px -22px rgba(26,24,19,.28);
  --shadow-pop:  0 24px 64px -24px rgba(26,24,19,.38);

  /* Beweging. Eén duur, één curve, overal. */
  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: 140ms;
  --base: 220ms;
  --slow: 420ms;
}

/* --- 2. Basis ----------------------------------------------------- */
html, body, #root { height: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  text-rendering: optimizeLegibility;
}

* { -webkit-tap-highlight-color: transparent; }

/* Zichtbare focus, maar alleen voor wie met het toetsenbord navigeert.
   Een muisklik hoort geen ring achter te laten. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- 3. Typografie ------------------------------------------------ */
/* Twee lettertypes. Inter voor alles wat je bedient, Fraunces voor wat
   je leest. Dat onderscheid is het hele idee: de app is geen dashboard
   maar een blad waarin mensen iets vertellen.

   Fraunces is een brede, warme schreefletter met een optische as: bij
   grote formaten wordt hij vanzelf iets fijner van lijn, bij kleine
   formaten steviger. Dat is precies wat je wilt van een letter die
   zowel een kop van 60px als een citaat van 17px moet dragen. */

.fr-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -0.005em;   /* breder dan de vorige letter, dus minder aantrekken */
  line-height: 1.1;
}

.fr-h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); }
.fr-h2 { font-size: clamp(1.75rem, 4.2vw, 2.75rem); }
.fr-h3 { font-size: clamp(1.375rem, 3vw, 1.75rem); }

/* Bovenschrift boven een sectie. Klein, wijd, rustig. */
.fr-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Een tip is een citaat, geen veldwaarde. */
.fr-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}
@media (min-width: 640px) { .fr-quote { font-size: 1.0625rem; } }

.fr-meta { font-size: 0.75rem; color: var(--faint); }
.fr-lede { font-size: 1.0625rem; line-height: 1.6; color: var(--muted); max-width: 34rem; }

/* --- 4. Knoppen --------------------------------------------------- */
/* Minimaal 44px hoog waar het kan: kleiner is op een telefoon lastig
   te raken. Kleine varianten alleen voor secundaire handelingen. */

.fr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  font-size: 0.875rem; font-weight: 600;
  padding: 11px var(--s4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease),
              transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.fr-btn:active { transform: translateY(1px) scale(.995); }
.fr-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.fr-btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(20,58,49,.24);
}
.fr-btn-primary:hover:not(:disabled) { background: var(--accent-deep); }

.fr-btn-secondary {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.fr-btn-secondary:hover:not(:disabled) { background: var(--raised); border-color: #DCD4C6; }

.fr-btn-ghost { background: transparent; color: var(--muted); }
.fr-btn-ghost:hover:not(:disabled) { background: var(--raised); color: var(--ink); }

.fr-btn-sm { padding: 7px var(--s3); font-size: 0.8125rem; border-radius: var(--r-sm); }
.fr-btn-lg { padding: 15px var(--s6); font-size: 0.9375rem; border-radius: var(--r-lg); }
.fr-btn-block { width: 100%; }

/* Op een telefoon bedien je met een duim, niet met een muispunt. Onder
   de 640px krijgt elke knop daarom een ondergrens van 40px hoog. Dat
   kost verticale ruimte, en die ruimte is het waard: een knop die je
   twee keer moet raken kost meer. */
@media (max-width: 639px) {
  .fr-btn { min-height: 44px; }
  .fr-btn-sm { min-height: 40px; padding-left: var(--s4); padding-right: var(--s4); }
}

/* Een rij knoppen of filters die niet past, wordt schuifbaar in plaats
   van dat hij afbreekt in een rommelige stapel. */
.fr-schuif {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
}
.fr-schuif > * { flex: none; scroll-snap-align: start; }

/* --- 5. Velden ---------------------------------------------------- */
.fr-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px var(--s3);
  font-size: 0.9375rem;      /* onder 16px zoomt iOS in bij focus; 15px is de rand */
  color: var(--ink);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.fr-input::placeholder { color: var(--faint); }
.fr-input:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.fr-label {
  display: block; font-size: 0.75rem; font-weight: 600;
  color: var(--muted); margin-bottom: var(--s1);
}

/* --- 5b. Velden op een telefoon ------------------------------------ */
/* iOS Safari zoomt automatisch in zodra je een veld aanraakt met een
   lettergrootte onder de 16px. De pagina staat dan scheef en de
   gebruiker moet handmatig terugzoomen. Dat is geen smaakkwestie maar
   een fout die je op elke iPhone ziet.
   Onder de 640px dus 16px, daarboven weer 14px voor een rustiger beeld. */
.fr-veld {
  font-size: 16px;
  min-height: 44px;               /* de gangbare ondergrens voor een raakvlak */
}
@media (min-width: 640px) {
  .fr-veld { font-size: 0.875rem; min-height: 0; }
}

/* Zelfde reden, voor de velden die nog met losse klassen zijn opgebouwd. */
@media (max-width: 639px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="date"], input[type="time"],
  input:not([type]), select, textarea {
    font-size: 16px;
  }
}

/* --- 6. Kaarten en vlakken ---------------------------------------- */
.fr-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: box-shadow var(--base) var(--ease),
              border-color var(--base) var(--ease),
              transform var(--base) var(--ease);
}
.fr-card-hover:hover {
  box-shadow: var(--shadow-card);
  border-color: #DCD4C6;
  transform: translateY(-2px);
}
.fr-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}
.fr-quiet {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* --- 7. Badges en rangen ------------------------------------------ */
/* Vijf rangen, oplopend van rustig naar warm. Geen medailles, geen
   punten. Het verschil zit in tint en gewicht, niet in versiering. */

.fr-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  white-space: nowrap;
}
.fr-rank-insider     { background: var(--raised);      color: var(--muted);  border-color: var(--line); }
.fr-rank-connoisseur { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.fr-rank-tastemaker  { background: #E4EDE9;            color: var(--accent-deep); border-color: #BACFC7; }
.fr-rank-icon        { background: var(--clay-soft);   color: var(--clay);   border-color: var(--clay-line); }
.fr-rank-legend      { background: #2A2620;            color: #F0E6D2;       border-color: #2A2620; }

/* Waarom zie ik dit? De brugregel krijgt zijn eigen, zachte tint. */
.fr-bridge {
  background: var(--bridge-soft);
  border: 1px solid var(--bridge-line);
  color: var(--bridge);
  border-radius: var(--r-md);
}

/* --- 8. Avatars --------------------------------------------------- */
.fr-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  flex: none;
  overflow: hidden;
}

/* --- 9. Tags ------------------------------------------------------ */
.fr-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.8125rem; font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--raised);
  color: var(--muted);
  border: 1px solid transparent;
}
.fr-tag-shared {                 /* jullie delen deze */
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-line);
}
.fr-tag-knowledge {              /* kennis, niet smaak */
  background: #FFFFFF;
  color: var(--ink);
  border-color: var(--line);
}

/* --- 10. Navigatie ------------------------------------------------ */
.fr-topbar {
  background: rgba(251,249,245,.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.fr-navitem {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: 0.875rem; font-weight: 500;
  color: var(--muted);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.fr-navitem:hover { background: var(--raised); color: var(--ink); }
.fr-navitem-actief { background: var(--ink); color: #fff; }
.fr-navitem-actief:hover { background: var(--ink); color: #fff; }

/* Onderbalk op telefoons. Veilige zone meenemen, anders valt de
   onderste rij onder de streep van de iPhone. */
.fr-bottomnav {
  background: rgba(251,249,245,.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.fr-bottomitem {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; flex: 1 1 0;
  min-height: 52px;
  font-size: 0.6875rem; font-weight: 500;
  color: var(--faint);
  transition: color var(--fast) var(--ease);
}
.fr-bottomitem-actief { color: var(--ink); font-weight: 600; }

/* --- 11. Meldingen ------------------------------------------------ */
.fr-notif {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: background var(--fast) var(--ease);
}
.fr-notif-gelezen { background: transparent; border-color: transparent; }
.fr-notif-punt {
  width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--clay); flex: none;
}

/* --- 12. Staten: laden, leeg, fout -------------------------------- */
.fr-skel {
  background: linear-gradient(90deg, #EFEAE1 25%, #F7F3EC 37%, #EFEAE1 63%);
  background-size: 400% 100%;
  animation: frShimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes frShimmer {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}

.fr-empty {
  text-align: center;
  padding: var(--s12) var(--s6);
  border: 1px dashed var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
}

/* --- 13. Beweging ------------------------------------------------- */
@keyframes frRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes frFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes frPop {
  0%   { transform: scale(.94); opacity: 0; }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}

.fade-in  { animation: frRise var(--base) var(--ease) both; }
.fr-rise  { animation: frRise var(--base) var(--ease) both; }
.fr-fade  { animation: frFade var(--base) var(--ease) both; }
.fr-pop   { animation: frPop  var(--slow) var(--ease) both; }

/* Gestaffeld binnenkomen van een lijst. Zes stappen is genoeg; daarna
   ziet niemand het verschil nog en gaat het vertragen. */
.fr-stagger > *:nth-child(1) { animation-delay: 0ms; }
.fr-stagger > *:nth-child(2) { animation-delay: 40ms; }
.fr-stagger > *:nth-child(3) { animation-delay: 80ms; }
.fr-stagger > *:nth-child(4) { animation-delay: 120ms; }
.fr-stagger > *:nth-child(5) { animation-delay: 160ms; }
.fr-stagger > *:nth-child(6) { animation-delay: 200ms; }

/* Wie beweging heeft uitgezet in zijn systeem, krijgt geen beweging.
   Dat is geen extraatje maar een toegankelijkheidseis. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 14. Kaart (Leaflet) ------------------------------------------ */
.leaflet-container { font: inherit; background: var(--raised); }
.pin {
  width: 28px; height: 28px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(26,24,19,.35);
  display: flex; align-items: center; justify-content: center;
}
.pin span { transform: rotate(45deg); font-size: 13px; }

/* --- 14b. Vensters op een telefoon --------------------------------- */
/* Het venster komt van onderen omhoog en plakt aan de onderrand. Op een
   iPhone zit daar de streep voor de startbeweging; zonder deze ruimte
   valt de laatste knop daar deels achter. */
.fr-modal-blad {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Achtergrond niet mee laten scrollen zolang er een venster open staat.
   Zonder dit scrollt de pagina eronder door zodra je in het venster het
   einde bereikt, en dan ben je je plek kwijt. */
body.fr-vast {
  overflow: hidden;
  touch-action: none;
}

/* --- 14c. Foto's --------------------------------------------------- */
/* Een vaste hoogte met object-cover maakt van elke foto een reep. Bij
   een staande foto sneuvelt dan precies het onderwerp, want dat zit
   zelden in de horizontale middenstrook.
 *
 * Daarom een vaste verhouding in plaats van een vaste hoogte, en de
 * uitsnede vanaf de bovenkant. Bij eten, gevels en mensen staat het
 * onderwerp bijna altijd boven het midden; de onderste strook is vaker
 * tafel, stoep of schaduw. */
.fr-foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 35%;
  background: var(--raised);
  display: block;
}
.fr-foto-breed { aspect-ratio: 16 / 10; }

/* Op een plekpagina of in een venster is er ruimte om de foto helemaal
   te laten zien. Daar snijden we niets weg. */
.fr-foto-heel {
  width: 100%;
  max-height: min(60vh, 420px);
  object-fit: contain;
  background: var(--raised);
  display: block;
}

/* --- 15. Hulpklassen ---------------------------------------------- */
.fr-line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fr-line-clamp-3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Nergens horizontaal scrollen door een te lange plaatsnaam of tip. */
.fr-break { overflow-wrap: anywhere; word-break: break-word; }