/* Bouwstenen, de stijllaag over de bestaande site.
 *
 * WAAROM DIT EEN LOSSE STYLESHEET IS
 * De inhoud van rankkraft.com draagt de posities in Google. Die tekst blijft
 * daarom onaangeroerd; alleen de vormgeving verandert. Deze laag komt na
 * style.css en overschrijft de tokens. Wil je terug naar het oude uiterlijk,
 * dan haal je dit ene bestand uit de pagina's. Meer is er niet voor nodig.
 *
 * Het blauw (#2563eb) en groen (#10b981) stonden al in style.css, die blijven.
 * Nieuw zijn het warme papier, de zwarte inkt, de dikke randen en de harde
 * schaduw zonder vervaging, plus twee lettertypes.
 */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Outfit:wght@400;500;600;700&display=swap');

:root{
  /* warm papier in plaats van koel grijsblauw */
  --light:      #f7f7f2;
  --white:      #ffffff;
  --dark:       #171412;
  --dark-2:     #2a2521;
  --dark-3:     #4a423b;
  --gray:       #6b6259;
  --gray-light: #8e8579;
  --border:     #171412;

  --purple:     #7c3aed;   /* hosting */
  --amber:      #f59e0b;   /* marketing */

  --bs-rand:    3px solid var(--dark);
  --bs-radius:  16px;
  --bs-schaduw: 6px 6px 0 0 var(--dark);
  --bs-schaduw-klein: 4px 4px 0 0 var(--dark);

  /* de bestaande zachte schaduwen uitzetten, die vloeken met de harde rand */
  --shadow-depth: none;
  --shadow-glow-blue: none;
  --shadow-glow-green: none;
}

body{
  background: var(--light);
  color: var(--dark);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

h1,h2,h3,.nav__logo,.process-step__num,.result-badge{
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}
h1{ font-weight: 800; }

/* Knoppen: pil met dikke rand en harde schaduw.
   Let op de tekstkleur: wit op groen haalt maar 2,5:1 en op amber 2,2:1.
   Daarom staat op die twee altijd donkere tekst. */
.btn{
  border: var(--bs-rand);
  border-radius: 999px;
  box-shadow: var(--bs-schaduw-klein);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover,.btn:focus-visible{
  transform: translate(-2px,-2px);
  box-shadow: var(--bs-schaduw);
}
.btn:active{ transform: translate(2px,2px); box-shadow: 1px 1px 0 0 var(--dark); }
.btn--primary{ background: var(--primary); color: #fff; }
.btn--outline-dark{ background: var(--white); color: var(--dark); }

/* Vlakken krijgen dezelfde behandeling */
/* Let op: niet blind een witte achtergrond forceren. De uitgelichte
   prijskaart is donker met witte tekst; die werd hierdoor onleesbaar.
   Vandaar :not(--featured) hieronder, en een eigen regel voor die kaart. */
.card,.blog-card,.faq-item,.process-step,.form-group input,
.form-group textarea,.form-group select,.result-badge,.tag,
.pricing-card:not(.pricing-card--featured){
  border: var(--bs-rand);
  border-radius: var(--bs-radius);
  background: var(--white);
}

/* De uitgelichte kaart houdt zijn donkere vlak, krijgt alleen de rand en
   de harde schaduw erbij. */
.pricing-card--featured{
  border: var(--bs-rand);
  border-radius: var(--bs-radius);
  box-shadow: var(--bs-schaduw);
}
.pricing-badge{
  border: 2px solid var(--dark);
  border-radius: 999px;
}
.card,.blog-card,.pricing-card{ box-shadow: var(--bs-schaduw); }
.tag,.result-badge{
  border-radius: 999px;
  border-width: 2px;
  box-shadow: none;
  font-weight: 600;
}
.blog-card__img{ border-radius: 0; border-bottom: var(--bs-rand); }

.section--light{ background: #efeee7; }

/* Header met een harde onderrand in plaats van een schaduw */
header,.header,.nav{
  border-bottom: var(--bs-rand);
  box-shadow: none;
  background: var(--light);
}

footer,.footer{
  border-top: var(--bs-rand);
  background: var(--light);
  color: var(--dark);
}
.footer a{ color: var(--dark-3); }
.footer a:hover,.footer a:focus{ color: var(--dark); }

/* Zichtbare focus, want de outline verdwijnt anders tegen de dikke rand */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  .btn{ transition: none; }
  .btn:hover,.btn:focus-visible{ transform: none; }
}

/* ---------------------------------------------------------------------------
 * Mobiele correcties, 4 september 2026
 *
 * Deze drie problemen bestonden al vóór deze stijllaag; dat is gemeten door de
 * pagina's een keer met en een keer zonder bouwstenen.css te laden. Beide keren
 * exact evenveel elementen buiten beeld. Ze horen hier thuis omdat het
 * vormgeving is, en omdat een fix in deze laag geen enkele pagina-inhoud raakt.
 * ------------------------------------------------------------------------- */

@media (max-width: 640px){

  /* 1. De kolommen met plaatsnamen in de voettekst braken niet af, waardoor de
   *    laatste kolom 23px buiten het scherm viel. Op elke pagina, want de
   *    voettekst is overal dezelfde. */
  /* Let op de specificiteit: de bestaande regel zet hier een grid met vier
   * vaste kolommen neer en wint van een enkele class. Vandaar footer ervoor.
   * Geen block maar een raster dat zelf afbreekt, dat leest prettiger dan
   * vier lijsten onder elkaar. */
  footer .footer-locations,
  .footer .footer-locations{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 4px 16px;
    width: 100%;
    max-width: 100%;
  }
  footer .footer-locations > div,
  .footer .footer-locations > div{
    min-width: 0;
    width: auto;
  }
  .footer-locations ul{
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 0;
    margin: 0 0 18px;
    list-style: none;
  }
  .footer-locations li{ width: auto; }

  /* 2. De vergelijkingstabel op /prijzen is 520px breed op een scherm van 375.
   *    Hij werd afgekapt in plaats van scrollbaar, dus een deel van de inhoud
   *    was onbereikbaar. Nu schuift hij horizontaal binnen zijn eigen kader. */
  table{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 3. Links in de voettekst waren 18 tot 20px hoog. De richtlijn is 44px voor
   *    een vingertik. Padding in plaats van een vaste hoogte, zodat de tekst
   *    zelf niet verspringt. */
  .footer a,
  .footer-locations a{
    display: inline-block;
    padding: 9px 2px;
    line-height: 1.3;
  }
}

@media (max-width: 640px){
  /* 4. Op /portfolio staan drie resultaatvakken in een grid dat als inline
   *    stijl in de HTML zit: repeat(3,1fr). Op een telefoon is elke kolom dan
   *    circa 100px en steekt de inhoud eruit. Inline stijl wint van elke
   *    selector, dus hier is !important de enige weg zonder de HTML te
   *    veranderen, en die willen we niet aanraken. */
  div[role="list"][style*="grid"]{
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  /* 5. Losse links in contactgegevens en plaatsenlijsten waren 18 tot 20px
   *    hoog. Breder getroffen dan de eerdere regel, die alleen in .footer
   *    pakte. */
  a[href^="mailto:"],
  a[href^="tel:"],
  .footer-locations a,
  footer a{
    display: inline-block;
    min-height: 32px;
    padding-block: 7px;
    line-height: 1.4;
  }
}

@media (max-width: 640px){
  /* 6. Laatste te kleine tikdoelen: plaatsnaamlinks in de lopende tekst van de
   *    stadpagina's en de "lees meer" onder blogkaarten. WCAG 2.2 vraagt
   *    minimaal 24 bij 24 px; 20px hoog haalt dat net niet. */
  /* min-height doet niets op een inline element, vandaar inline-block. Dat
   * was de reden dat de plaatsnaamlinks op 20px bleven staan. */
  main a:not(.btn):not(.nav__logo){
    display: inline-block;
    min-height: 24px;
    padding-block: 2px;
  }
  .blog-card__link,
  .blog-card a{
    display: inline-block;
    min-height: 32px;
    padding-block: 6px;
  }
}

/* ---------------------------------------------------------------------------
 * Vangnet voor de scroll-onthulling
 *
 * De blokken met .fade-in worden zichtbaar zodra een IntersectionObserver ze
 * ziet. Dat werkt, maar het laatste blok op /portfolio ("Klaar voor je gratis
 * demo?") bleef ook na volledig doorscrollen op opacity 0 staan. Een oproep tot
 * actie die niemand ooit ziet is erger dan geen animatie.
 *
 * Dit vangnet zet alles wat na drie seconden nog verborgen is alsnog aan. Werkt
 * de observer wel, dan krijgt het element de klasse .visible en raakt deze regel
 * hem niet meer. Puur CSS, dus main.js blijft ongemoeid.
 * ------------------------------------------------------------------------- */
.fade-in:not(.visible){
  animation: bs-vangnet .45s ease 3s forwards;
}
@keyframes bs-vangnet{
  to{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .fade-in:not(.visible){ animation-duration: .01s; animation-delay: .01s; }
}