/* Reddo - de landingpagina: de hero, de statusbanden, de onboarding en het brede scherm.

   Geknipt uit components.css. Zie de kop daar voor de volgorde waarin deze bestanden
   geladen worden en waarom die vastligt. */

/* ---------------------------------------------------------------- landing --
   Mockup 10a. Maten letterlijk uit design/reddo-mockups-10.html; kleuren via
   tokens.css zodat de statusbanden dezelfde waarden gebruiken als de pills en
   de strook op een kaart. */

.r-landing { padding-left: 0; padding-right: 0; }

/* Alleen de banden lopen tot de rand; de rest houdt de schermmarge. */
/* Feedback 16 aug, punt 1: samen met .r-landing__hero's bovenmarge verantwoordelijk
   voor de witruimte boven de kop — gemeten en gehalveerd, zie e2e-controle. */
.r-landing > .r-topbar { padding: 12px 24px; }
.r-landing__nav { display: flex; gap: 8px; }

/* Feedback 16 aug, punt 2: 13px -> 15% groter. Vaste 92px-breedte liet
   "Mijn status" niet meer passen bij het grotere lettertype — vervangen door
   horizontale padding, zodat de knop met de tekst meegroeit.
   Daarna slanker gemaakt: de zijpadding gehalveerd (14px -> 7px). Er stond een
   `min-width: 104px` bij om de twee knoppen even breed te maken — en dat was precies wat
   de padding weer opat: "Werklijst" is van zichzelf 82px, dus die 104px gaf hem alsnog
   18px lucht aan weerszijden. Gelijke breedte is het niet waard als de knoppen daardoor
   niet slanker worden. Nu volgen ze hun tekst, met 7px eromheen. De letters blijven 15px:
   het ging om de ruimte, niet om de maat.

   Zijkanten echt gehalveerd: 14px -> 7px. Stond tussendoor op 9px omdat ik hem bij het
   weghalen van de min-width te ruim terugzette; dat was 36% en geen 50%.

   Verticaal blijft 7px staan, en dat is bewust. Halveren zou de knop op 28px hoog brengen
   en dat is te weinig om met een duim betrouwbaar te raken — hij zit dan onder de maat die
   de rest van de app aanhoudt (34px voor het potlood, de prullenbak en het inklappen). Het
   ging om de lucht naast de tekst; die is nu weg. */
.r-landing__navbtn {
  padding: 7px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--r-radius-btn);
  text-decoration: none;
  box-sizing: border-box;
  white-space: nowrap;
}

.r-btn--ghost { border: 1.5px solid var(--r-black); color: var(--r-black); background: transparent; }
.r-btn--dark { background: var(--r-black); color: var(--r-paper); border: 1.5px solid var(--r-black); }

/* De toegangscode onder de werklijst, na het invullen van de bedrijfsnaam. Een
   eigen kader (de gewone .r-code staat ín een witte kaart en zou hier wegvallen
   tegen het papier) en zichtbaar tijdelijk — hij hoort bij dit moment. */
.r-codeslot:empty { display: none; }
.r-code--access {
  margin-top: 12px; background: var(--r-card);
  border: 1px solid var(--r-border); border-left: var(--r-strip-w) solid var(--r-black);
}
.r-code__done {
  display: block; width: 100%; margin-top: 12px; padding: 11px;
  background: var(--r-black); color: var(--r-paper); font-size: 14px; font-weight: 700;
}

/* D3: de toegangscode-onthulling. Eén brede CTA — dit scherm heeft maar één
   uitgang, dus geen reden om 'm klein te houden zoals de landing-navigatie. */
.r-access__cta { display: block; width: 100%; padding: 14px; font-size: 15px; margin-top: 20px; }

/* Een scherm met één boodschap en één uitgang: vult de hoogte, inhoud in het midden.
   `dvh` en niet `vh`: op iOS rekent 100vh de adresbalk niet mee, dus dan valt de
   knop precies achter de balk waar je hem moet raken. */
.r-screen--focus { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.r-focus__body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 8vh; }

.r-landing__hero { padding: 8px 24px 18px; }  /* onderruimte 20% korter (was 22px) */

.r-landing__eyebrow {
  font-family: var(--r-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #5c4a33;
}

.r-landing__title {
  font-size: 46px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 12px 0 0;
  color: var(--r-black);
}

.r-landing__sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--r-muted);
  /* Feedback 17 aug: 20% dichter op de kop (was 14px). */
  margin: 11px 0 0;
  max-width: 300px;
}

.r-landing__ctawrap { margin: 0 24px; }

.r-landing__cta {
  width: 100%;
  background: var(--r-black);
  color: var(--r-paper);
  padding: 10px;
  /* Zonder dit telt de padding bij de 100% op en steekt het blok 20px buiten zijn
     container: links valt dat niet op, rechts wel — het botste tegen de schermrand. */
  box-sizing: border-box;
  border: 0;
  border-radius: var(--r-radius-card-lg);
  display: flex;
  align-items: stretch;
  gap: 14px;
  cursor: pointer;
  font-family: inherit;
}

.r-landing__ctaphoto {
  flex: 1;
  /* 20% lager (was 76px): het blok botste tegen de onderkant van het scherm. */
  height: 61px;
  border-radius: 12px;
  border: 1px dashed rgba(250, 247, 242, 0.45);
  display: grid;
  place-items: center;
  font-size: 12px;
  color: rgba(250, 247, 242, 0.7);
}

.r-landing__ctalabel {
  flex: none;
  /* Fotovlak 15% smaller; dit label vangt die ruimte op (was 34%). */
  width: 44%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.r-bands { display: flex; flex-direction: column; margin-top: 26px; }

/* Uitklapbare stap: <details>, zodat openen/sluiten zonder JS werkt en het
   toetsenbord het gratis meekrijgt. De accordeon-regel (max één open) zit wel
   in JS — die kan CSS niet. */
.r-step__summary {
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  cursor: pointer;
  list-style: none; /* verbergt de standaard driehoek */
}

.r-step__summary::-webkit-details-marker { display: none; }

.r-step__title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.r-step__num { font-family: var(--r-font-mono); font-size: 12px; }

.r-step__body { padding: 0 24px 20px; font-size: 14px; line-height: 1.5; }

.r-step__chev { flex: none; align-self: center; transition: transform 0.2s; }
.r-step[open] .r-step__chev { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .r-step__chev { transition: none; }
}

.r-band__sms {
  font-family: var(--r-font-mono);
  font-size: 11px;
  font-weight: 600;
  align-self: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  padding: 4px 9px;
  border-radius: 6px;
  letter-spacing: 0.08em;
}

.r-band--aangenomen { background: var(--r-status-aangenomen); color: var(--r-black); }
.r-band--aangenomen .r-step__num { color: #a89c88; }
.r-band--aangenomen .r-step__chev { color: #8a7c62; }
.r-band--aangenomen .r-step__body { color: #5c4a33; }

.r-band--bezig { background: var(--r-status-bezig); color: var(--r-black); }
.r-band--bezig .r-step__num,
.r-band--bezig .r-step__chev { color: #7a5510; }
.r-band--bezig .r-step__body { color: #5c4110; }

.r-band--klaar { background: var(--r-status-klaar); color: #fff; }
.r-band--klaar .r-step__num { color: #bfe6d3; }
.r-band--klaar .r-step__chev { color: rgba(255, 255, 255, 0.7); }
.r-band--klaar .r-step__body { color: #d9efe4; }

.r-band--opgehaald { background: var(--r-status-meegegeven); color: var(--r-paper); }
.r-band--opgehaald .r-step__num,
.r-band--opgehaald .r-step__chev { color: #7fa38f; }
.r-band--opgehaald .r-step__body { color: #b9d2c4; }

/* --- Onboarding: je zaak zoeken en claimen (D2/D3) --- */
.r-onboard__intro { font-size: 14px; line-height: 1.5; color: var(--r-muted); margin: 0 8px 12px; }
.r-onboard__msg { font-size: 13px; color: var(--r-muted); padding: 12px 8px; }
/* De basis van `.r-picker__item` staat in auth.css — de kiezer wordt op twee schermen
   gebruikt. Deze variant hoort hier omdat alleen de onboarding hem uitschakelt. Hij wint
   op specificiteit (`:disabled`), dus de laadvolgorde doet er hier niet toe; dat is de
   enige plek waar twee bestanden dezelfde klasse aanraken. */
.r-picker__item:disabled { cursor: not-allowed; opacity: .6; }

/* "Verder als ..." — de uitweg als de registratie je niet kent. Onderaan de
   resultaten en niet als eerste keuze: staat je zaak er wél, dan is die de betere
   route (dan vullen we adres en tijden voor je in). */
.r-onboard__self { padding: 12px; border-top: 1px solid var(--r-border); }
.r-onboard__selftext { font-size: 12.5px; color: var(--r-muted); margin-bottom: 10px; }
.r-onboard__selfbtn {
  display: block; width: 100%; padding: 12px;
  background: var(--r-black); color: var(--r-paper);
  font-size: 14.5px; font-weight: 700;
}
.r-onboard__selfbtn:disabled { opacity: .6; cursor: default; }

/* Feedback 16 aug, punt 3: het zoekveld zelf staat onder de banden, niet meer
   achter een link naar een apart scherm. Onder de banden, niet in de topbar:
   die twee knoppen zijn voor wie Reddo al gebruikt. */
/* Lucht boven de aanmeldregel. Hij stond met 4px tegen de gekleurde band aan geplakt: die
   banden lopen van rand tot rand en zijn zwaar, en daar kwam meteen kleine linkse tekst
   onder. Dat leest niet als "hier begint iets nieuws" maar als een regel die uit de
   opmaak is gevallen. */
/* Tweede correctie in dezelfde richting, 18 aug: 30px bleek nog steeds te weinig om los
   te komen van de band erboven, dus 48px. En de regel zelf een maat groter (15 -> 17px):
   hij is de enige uitnodiging op deze pagina voor iemand die Reddo nog niet gebruikt, en
   stond op dezelfde grootte als de bijschriften eromheen. */
.r-landing__onboard { padding: 48px 24px 22px; }
.r-landing__onboardlabel { font-size: 17px; font-weight: 700; margin-bottom: 12px; }

/* ---------------------------------------------------- landing, breed scherm --
   agent-b-desktop.md / design/reddo-home-browser.html. Maten letterlijk uit
   dat bestand. Verborgen tot 900px; daaronder verandert niets aan wat hierboven
   staat — dat is de hele opzet van deze knip. */
.r-landing__wide { display: none; }

@media (min-width: 900px) {
  .r-screen.r-landing { max-width: 1200px; }
  .r-landing > .r-topbar { padding: 20px 10%; }

  /* De mobiele hero, CTA, accordeon en het inline zoekveld wijken voor de
     tweekoloms-indeling — de mockup laat ze weg en de twee navigatieknoppen
     in de topbar blijven de weg naar die schermen op een breed scherm. */
  .r-landing__hero,
  .r-landing__ctawrap,
  .r-bands,
  .r-landing__onboard {
    display: none;
  }

  /* Eén kolom: titel, ondertitel en daaronder de film, die zelf de banden links en de
     telefoon rechts toont. Tot de film de banden meenam waren dit twee kolommen — HTML-
     kaarten links, een telefoon rechts — en daarin werd de telefoon kleiner dan de
     kaarten, omdat de titel links niet afbreekt en de meeste breedte pakt. */
  .r-landing__wide { display: block; padding: 36px 10% 48px; }

  .r-landing__wide .r-landing__eyebrow { font-size: 12px; }

  .r-landing__title--wide {
    font-size: 54px; line-height: 1; letter-spacing: -.04em; font-weight: 700;
    margin: 16px 0 0; white-space: nowrap; color: var(--r-black);
  }

  .r-landing__sub--wide {
    font-size: 17px; line-height: 1.6; color: var(--r-muted);
    margin: 8px 0 0; white-space: nowrap;
  }

  /* Zelfde .r-band--* kleuren als de mobiele accordeon (hierboven); alleen
     maat en interactie wijken af — geen <details>, dus altijd open, en geen
     chevron: de mockup toont er geen. */
  .r-landing__cards {
    /* max-width: zonder film (andere taal dan Nederlands) staan de kaarten alleen in een
       kolom over de volle breedte; zonder grens worden het brede balken. */
    margin-top: 26px; width: 85%; max-width: 560px; border-radius: 18px; overflow: hidden;
    box-shadow: 0 14px 40px rgba(26, 20, 17, .12);
  }
  .r-step--wide .r-step__summary { padding: 16px 19px; cursor: default; }
  .r-step--wide .r-step__title { font-size: 34px; }
  .r-step--wide .r-step__body { padding: 0 19px 15px; font-size: 14.5px; }
}

/* De hero-loop (mountHeroLoop() in landing.ts). Eén video die tussen twee plekken
   verhuist; de plek die door de 900px-grens verborgen is, blijft leeg.

   De film toont de vier banden én de telefoon, dus waar hij staat vervangt hij de
   HTML-banden. Alleen in het Nederlands: de tekst in de film is beeld, en een Engelse
   bezoeker krijgt gewoon de HTML-banden (en geen film).

   Geen achtergrond, geen schaduw, geen kader: de film is transparant, en de
   schrijflijntjes van .reddo-ruled op body moeten erdoorheen lopen. Een `background` op
   een van deze blokken zou ze afdekken.

   pointer-events: none omdat de video er alleen staat om naar te kijken. Het smalle
   blok ligt vlak onder "Voeg werk toe" — een video die daar een tik opvangt, maakt die
   knop kleiner dan hij eruitziet. */
.r-landing__loop { pointer-events: none; }
.r-landing__loopmedia { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Smal: 1080x1720, telefoon boven, banden eronder. Van rand tot rand, zoals de
   HTML-banden die hij vervangt. */
.r-landing__loop--narrow { aspect-ratio: 1080 / 1720; margin-top: 8px; }

/* Breed: 1760x1000, banden links, telefoon rechts. De banden beginnen in de film op
   x 20, niet op 0. Zonder correctie staan ze ~11px rechts van de titel erboven; 1,15%
   naar links (en even veel breder) zet hun linkerrand er precies onder. */
/* Boven de banden zit in de film ~7% van zijn breedte lege ruimte (daar steekt alleen de
   telefoon in uit). Met de gewone 26px erboven stonden de banden daardoor ruim 100px onder
   de ondertitel, tegen 26px bij de HTML-kaarten. -3% haalt het grootste deel weg zonder
   dat de telefoon tegen de ondertitel aan komt; een marge in % rekent met de breedte. */
.r-landing__loop--wide { aspect-ratio: 1760 / 1000; margin: -3% 0 0 -1.15%; width: 101.15%; }

@media (min-width: 900px) {
  .r-landing__loop--narrow { display: none; }
}

/* De vier stappen voor schermlezers en zoekmachines. In de film zijn ze beeld, en de
   video is aria-hidden; zonder dit blok staan ze nergens meer als tekst op de pagina. */
.r-landing__srsteps {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}